キャンバス要素にある画像を_img src
_で表される画像に変換する可能性はありますか?
何らかの変換後に画像をトリミングして保存するために必要です。 FileReader()
またはToBlop()
、toDataURL()
、getImageData()
のようなビュー関数がインターネット上で見つかりましたが、わかりません。 JavaScriptで適切に実装および使用する方法。
これは私のHTMLです:
_<img src="http://picture.jpg" id="picture" style="display:none"/>
<tr>
<td>
<canvas id="transform_image"></canvas>
</td>
</tr>
<tr>
<td>
<div id="image_for_crop">image from canvas</div>
</td>
</tr>
_
JavaScriptでは、次のようになります。
_$(document).ready(function() {
img = document.getElementById('picture');
canvas = document.getElementById('transform_image');
if(!canvas || !canvas.getContext){
canvas.parentNode.removeChild(canvas);
} else {
img.style.position = 'absolute';
}
transformImg(90);
ShowImg(imgFile);
}
function transformImg(degree) {
if (document.getElementById('transform_image')) {
var Context = canvas.getContext('2d');
var cx = 0, cy = 0;
var picture = $('#picture');
var displayedImg = {
width: picture.width(),
height: picture.height()
};
var cw = displayedImg.width, ch = displayedImg.height
Context.rotate(degree * Math.PI / 180);
Context.drawImage(img, cx, cy, cw, ch);
}
}
function showImg(imgFile) {
if (!imgFile.type.match(/image.*/))
return;
var img = document.createElement("img"); // creat img object
img.id = "pic"; //I need set some id
img.src = imgFile; // my picture representing by src
document.getElementById('image_for_crop').appendChild(img); //my image for crop
}
_
このスクリプトでキャンバス要素を_img src
_イメージに変更するにはどうすればよいですか? (このスクリプトにはいくつかのバグがある可能性があります。)
canvas.toDataURL()
は、ソースとして使用できる data url を提供します。
_var image = new Image();
image.id = "pic"
image.src = canvas.toDataURL();
document.getElementById('image_for_crop').appendChild(image);
_
こちらもご覧ください:
これを行う。 bodyタグを閉じる直前に、これをドキュメントの下部に追加します。
<script>
function canvasToImg() {
var canvas = document.getElementById("yourCanvasID");
var ctx=canvas.getContext("2d");
//draw a red box
ctx.fillStyle="#FF0000";
ctx.fillRect(10,10,30,30);
var url = canvas.toDataURL();
var newImg = document.createElement("img"); // create img tag
newImg.src = url;
document.body.appendChild(newImg); // add to end of your document
}
canvasToImg(); //execute the function
</script>
もちろん、ドキュメントのどこかに、取得するキャンバスタグが必要です。
<canvas id="yourCanvasID" />
Fiddleで2つの問題を見つけました。1つはZetaの回答の最初の問題です。
メソッドはtoDataUrl();
ではなくtoDataURL();
ではなく、キャンバスを変数に保存するのを忘れていました。
したがって、Fiddleは正常に動作します http://jsfiddle.net/gfyWK/12/
これがお役に立てば幸いです!
canvas.toDataURL
は、元の画像URL(相対または絶対)がWebページと同じドメインに属さない場合は機能しません。ブックマークレットと、画像を含むWebページ内の単純なJavaScriptからテストしました。 David Walshの動作をご覧ください 例 。独自のWebサーバーにHTMLと画像を配置し、元の画像を相対URLまたは絶対URLに切り替え、外部画像URLに変更します。最初の2つのケースのみが機能しています。
Fiddleを修正-キャンバスに複製された画像を表示...
そして、右クリックは.PNGとして保存できます
<div style="text-align:center">
<img src="http://imgon.net/di-M7Z9.jpg" id="picture" style="display:none;" />
<br />
<div id="for_jcrop">here the image should apear</div>
<canvas id="rotate" style="border:5px double black; margin-top:5px; "></canvas>
</div>
さらに、フィドルページのJS ...
乾杯
現在、これをサーバー上のファイルに保存することを検討しています--- ASP.net C#(.aspx web form page).