要想将图片放入画布里，我们使用canvas元素的drawImage方法：
// Converts image to canvasreturns 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
}
这里的0, 0参数画布上的坐标点，图片将会拷贝到这个地方。
用JavaScript将画布保持成图片格式
如果你的画布上的作品已经完成，你可以用下面简单的方法将canvas数据转换成图片格式：
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image()
image.src = canvas.toDataURL("image/png")
return image
}
这段代码就能神奇的将canvas转变成PNG格式！
这些在图片和画布之间转换的技术可能比你想象的要简单的多。在以后的文章里，我会写一些将这些图片做不同滤镜处理的技术。
望采纳！！！！
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/**
* 需要将图片的名称和key的中括号中的字符对应。
* @param key{string} 需要替换的内容
* @param value{string} 代表的表情名称
* @param baseDir{string} 基本的图片路径
* @param prefix{string} 后缀名称
* @returns {string} 完整的img标签
*/
function test(key,value,baseDir,prefix){
if(key.indexOf('[')===0 && key.indexOf(']')===key.length-1){
var dir = baseDir+"/"+ (key.substring(1,key.length-1))+"."+prefix
return "<img src ='"+dir+"' alt='"+value+"'/>"
}
}
var baseDir = "./"
var key = "[Penguins]"
var value ="萌企鹅一家"
var prefix ="jpg"
var dd = test(key,value,baseDir,prefix)
window.onload = function(){
document.body.innerHTML = dd
}
</script>
</head>
<body>
</body>
</html>
可以。前端生成大量图片短时间内上千张，造成浏览器卡死是不可避免的，js可以生成1000张图片。JavaScript简称JS 是一种具有函数优先的轻量级，解释型或即时编译型的，高级编程语言。
