使用JavaScript将图片拷贝进画布
要想将图片放入画布里，我们使用canvas元素的drawImage方法：
// Converts image to canvas; returns new canvas element function convertImageToCanvas(image) { var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; canvas.getContext("2d").drawImage(image, 0, 0); return canvas; }
返回值相当于canvas节点
这里的0, 0参数画布上的坐标点，图片将会拷贝到这个地方。
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 drawImage() 方法。
注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
定义和用法
drawImage() 方法在画布上绘制图像、画布或视频。
drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数值
| 参数 | 描述 |
|---|---|
| img | 规定要使用的图像、画布或视频。 |
| sx | 可选。开始剪切的 x 坐标位置。 |
| sy | 可选。开始剪切的 y 坐标位置。 |
| swidth | 可选。被剪切图像的宽度。 |
| sheight | 可选。被剪切图像的高度。 |
| x | 在画布上放置图像的 x 坐标位置。 |
| y | 在画布上放置图像的 y 坐标位置。 |
| width | 可选。要使用的图像的宽度。（伸展或缩小图像） |
| height | 可选。要使用的图像的高度。（伸展或缩小图像） |
绘制视频：
JavaScript （每 20 毫秒，代码就会绘制视频的当前帧）：
var v=document.getElementById("video1"); var c=document.getElementById("myCanvas"); ctx=c.getContext('2d'); v.addEventListener('play',function() {var i=window.setInterval(function() {ctx.drawImage(v,0,0,270,135)},20);},false); v.addEventListener('pause',function() {window.clearInterval(i);},false); v.addEventListener('ended',function() {clearInterval(i);},false);
用JavaScript将画布保持成图片格式
如果你的画布上的作品已经完成，你可以用下面简单的方法将canvas数据转换成图片格式：
// Converts canvas to an image function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; }
返回值相当于img节点，canvas的 toDataURI （type , int ） 如果type参数的值为image/jpeg或image/webp,则第二个参数的值如果在0.0和1.0之间的话,会被看作是图片质量参数
这段代码就能神奇的将canvas转变成PNG格式！
对于Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 这个错误，如果直接在本地运行该页面会报这个错误，在服务器下返回如下该页面就没有错误了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>File API Test</title>
<script src="../js/jquery-2.0.3.min.js"></script>
<style>
#test{
100px;
height:100px;
}
</style>
</head>
<body>
<input type="file" id="fileImg" >
<img src="../img/b1.jpg" id="test" alt="">
<div id="new"></div>
<script>
function convertImageToCanvas(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0,100,100);
return canvas;
}
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
// image.crossOrigin = "Anonymous";
image.src = canvas.toDataURL("image/png");
/*image.src = '2.jpg';*/
console.log(canvas.toDataURL("image/png"));
return image;
}
$(function(){
// Get the image
var images=document.getElementById("test");
canvas = convertImageToCanvas(images);
// Actions
document.getElementById('new').appendChild(canvas);
document.getElementById("new").appendChild(convertCanvasToImage(canvas));
})
</script>
</body>
</html>