微信h5页面canvas画图，并用a便签下载，由于微信限制，所以只能是长按保存图片

最新推荐文章于 2024-08-13 11:36:29 发布

qq_39738977

最新推荐文章于 2024-08-13 11:36:29 发布

阅读量3k

点赞数

分类专栏： html vue canvas HTMLcanvas

本文链接：https://blog.csdn.net/qq_39738977/article/details/88989900

版权

本文介绍了在微信H5页面中利用canvas进行画图操作，并借助html2canvas插件实现在微信环境中下载图片的方法，由于微信的限制，用户需通过长按保存图片。

摘要由CSDN通过智能技术生成

H5之canvas画图，下载，借用html2canvas插件

DPR() { // 获取设备的屏幕尺寸
      if (window.devicePixelRatio && window.devicePixelRatio > 1) {
        return window.devicePixelRatio;
      }
      return 1;
    },
    parseValue(value) { // 转换参数为number类型
      return parseInt(value, 10);
    },
    async drawCanvas (selector) { // canvas画图
      // 获取想要转换的 DOM 节点
      const dom = document.querySelector(selector);
      const box = window.getComputedStyle(dom);
      // DOM 节点计算后宽高
      const width = this.parseValue(box.width);
      const height = this.parseValue(box.height);
      // 获取像素比
      const scaleBy = this.DPR();
      // 创建自定义 canvas 元素
      var canvas = document.createElement('canvas');
      // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
      canvas.width = width * scaleBy;
      canvas.height = height * scaleBy;
      // 设定 canvas css宽高为 DOM 节点宽高
      canvas.style.width = `