JavaScript怎么把Canvas内容转成图片
JavaScript怎么把Canvas内容转成图片?这篇文章运用了实例代码展示,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
使用JavaScript将图片拷贝进画布要想将图片放入画布里,我们使用canvas元素的drawImage
方法:
// Converts image to canvas; returns new canvas elementfunction 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
参数画布上的坐标点,图片将会拷贝到这个地方。
如果你的画布上的作品已经完成,你可以用下面简单的方法将canvas数据转换成图片格式:
// Converts canvas to an imagefunction convertCanvasToImage(canvas) {var image = new Image();image.src = canvas.toDataURL("image/png");return image;}
这段代码就能神奇的将canvas转变成PNG格式!
到此为止, 关于JavaScript把Canvas内容转成图片的方法有了一个基础的认识, 但是对于具体的使用方法还是需要多加巩固和练习,如果想了解更多相关内容,请关注亿速云行业资讯。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。