如何使用javascript/jquery.then旋轉圖像，然後我想要創建一個新的pattern.interested實際操作圖像

enter image description here 我有一個變量，其中包含一個image.can我旋轉圖像從JavaScript。如何使用javascript/jquery.then旋轉圖像，然後我想要創建一個新的pattern.interested實際操作圖像

var img = new Image(); 
img.src='http://www.ittefaq.com.bd/admin/news_images/2013/07/29/thumbnails/image_60156.jpg'; 
//now i want to rotate this image. is this possible ?

我試圖用帆布做它，但它沒有給我想要的結果。

這是可能的JavaScript/jQuery的？

我不想使用CSS。它不符合我的目的。

興趣在實際操縱圖像

來源

2013-07-29 MD TAHMID HOSSAIN

http://stackoverflow.com/questions/11832131/cross-browser-way-to-rotate-image-using-css http://www.w3schools.com/cssref/css3_pr_transform.asp –

是，這個有可能。你可能想發佈一些你試過的代碼。 – Tdelang

你用帆布嘗試了什麼？如果不是javascript：| – shyam

試試這個：

img.style.transform = "rotate(45deg)";

的jsfiddle：here

來源

2013-07-29 09:12:26

也可能需要設置其他的：-moz-transform/-webkit-transform/-ms-transform/-o-transform不確定它們在對象中的名字。（這些是CSS名稱） –

@ d'alar'cop：最近幾乎所有的現代瀏覽器都支持標準的CSS –

是的，但是我們經常會被迫使IE6（個人體驗）兼容。不是批評僅僅是對其他人未來的看法。 –

如果我得到這個正確的，要旋轉的前端圖像並且對實際操縱圖像不感興趣。

可以如JavaScript

jQuery('#rotationAngle').on('mouseup', function(){ 
    jQuery('.exampleImage').css(
'-webkit-transform', 'rotate(' + jQuery('#rotationAngle').val() + 'deg)', 
'transform', 'rotate(' + jQuery('#rotationAngle').val() + 'deg)'); 
});

Here這裏http://www.w3schools.com/cssref/css3_pr_transform.asp

HTML

<img class="exampleImage" src="http://www.corbisimages.com/images/Corbis-42-18522637.jpg?size=67&uid=c7ebc105-b4a4-4fad-8e7d-99ff79ac2ce4" height="300px"/> 
<input type="range" min="-180" max="180" step="1" value="0" id="rotationAngle">

解釋旋轉使用CSS3變換圖片是供您參考小提琴。

來源

2013-07-29 09:19:40 Gaurav

不，我想操縱圖像，然後我可以創建一個新的模式。我知道如何創建模式。 –

看起來像所有你需要的是將原點和畫布轉換爲網格上的不同位置。 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations將幫助你這樣做。 – Gaurav

謝謝。我找到了一些方向。 –

如何使用javascript/jquery.then旋轉圖像，然後我想要創建一個新的pattern.interested實際操作圖像

回答

相關問題