博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用JavaScript将Canvas内容转化成图片的方法
阅读量:5168 次
发布时间:2019-06-13

本文共 646 字,大约阅读时间需要 2 分钟。

使用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参数画布上的坐标点,图片将会拷贝到这个地方。

用JavaScript将画布保持成图片格式

如果你的画布上的作品已经完成,你可以用下面简单的方法将canvas数据转换成图片格式:

// Converts canvas to an imagefunction convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; }

这段代码就能神奇的将canvas转变成PNG格式!

转载于:https://www.cnblogs.com/makan/p/4680536.html

你可能感兴趣的文章
c# winform窗口自适应各种分辨率类
查看>>
前端Js框架汇总
查看>>
Android基础&进阶
查看>>
android的listview单项中包含RadioButton,实现RadioButton的单选显示效果
查看>>
Android学习笔记一:Android基本组件和Activity生命周期
查看>>
2016、11、17
查看>>
部署Java Web项目到Heroku
查看>>
VUE Error:if there's nested data,rowKey is required错误
查看>>
学习笔记7
查看>>
C# 中 动态获得或设置一个对象的值
查看>>
C#设计模式系列 8 ----Builder 生成器模式之--发工资了,带老婆到 岗顶百脑汇配置电脑...
查看>>
spring-boot-资源处理
查看>>
phpcms v9二次开发之模型类的应用(2)
查看>>
多线程之异步操作
查看>>
C++ 指定输出宽度和填充
查看>>
ImageX分块处理和保存
查看>>
解决百度BMR的spark集群开启slaves结点的问题
查看>>
bzoj 1861 treap
查看>>
Codeforces 263E Rhombus (看题解)
查看>>
【原创】Java移位运算
查看>>