• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    在HTML5 Canvas中放入图片和保存为图片的方法

    使用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);</p> <p> 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格式!

    这些在图片和画布之间转换的技术可能比你想象的要简单的多哦。

    上一篇:HTML5 Canvas+JS控制电脑或手机上的摄像头实例
    下一篇:HTML5中判断用户是否正在浏览页面的方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    在HTML5 Canvas中放入图片和保存为图片的方法 在,HTML5,Canvas,中,放入,图片,