【前端canvas】canvas生成图片并下载或预览 uniapp预览图片 & pc下载

canvas图片下载与预览

PiPiFamily

1205人浏览 · 2023-06-08 16:26:02

PiPiFamily · 2023-06-08 16:26:02 发布

我的另外一篇文章详细讲解了如何使用canvas进行绘图开发 https://blog.csdn.net/PiPiFamily/article/details/131108351
这篇文章主要分享使用canvas画图后我们会有一些下载保存canvas所画的图片，那么我们的方法就是将图转为base64进行下载

一、pc页面开发

<body>
 <canvas id="temp" ></canvas>
 <script type="text/javascripr">
       const c = document.getElementById('temp')
        const base64Img = c.toDataURL('image/png')
        var a = document.createElement('a') // 生成一个a元素
        var event = new MouseEvent('click') // 创建一个单击事件
        a.download = '证书图片' // 设置图片名称
        a.href = base64Img // 将生成的URL设置为a.href属性
        a.dispatchEvent(event)
</script>
也可
<script type="text/javascripr">
       const c = document.getElementById('temp')
        const base64Img = c.toDataURL('image/png')
        var a = document.createElement('a') // 生成一个a元素
       //  document.body.appendChild(a)
        a.download = '证书图片' // 设置图片名称
        a.href = base64Img // 将生成的URL设置为a.href属性
        a.click()
        a.remove()
</script>
 </body>

二、uniapp开发
这里基于vue2框架来进行开发

<template>
 <canvas id="temp" ></canvas>
  </template>
<script>

 export default {
 data:{
        return{
         width : 250
     height: 375,
     }
  }
  methods:{
           viewPhoto1() {
        uni.canvasToTempFilePath({
          canvasId: 'firstCanvas',
          destWidth: this.width * 2, //分享图片尺寸=画布尺寸1*缩放比0.5*像素比2
          destHeight: this.height * 2,
          quality: 1,
          x: 0,
          y: 0,
          fileType: 'png',
          success: (res) => {
            uni.previewImage({
              // 预览图片  图片路径必须是一个数组
              urls: [res.tempFilePath],
              current: 0,
            })
          },
        })
      },
  }
 }
</script>