vue3 后台返回的接口数据，下载图片到本地

<el-table><el-table-column align="left" label="操作" min-width="240"><template #default="scope"><el-button icon="edit" type="primary" link @click="editApiFunc1(scope.row)">编辑</el-button><el-button icon="delete" type="primary" link @click="deleteApiFunc1(scope.row)">删除</el-button><el-button id="dataTocopy" icon="DocumentCopy" type="primary" link @click="copyApiFunc1(scope.row)">一键复制</el-button><el-button id="uploadimage" icon="Download" type="primary" link @click="uploadimage1(scope.row)">下载原图</el-button></template></el-table-column>
</el-table><script setup>
import { ref } from 'vue'
// 下载原图
const uploadimage1 = (row) => {console.log(row, '点击当前行的数据')console.log(row.init_images, '后端返回的图片')//下载图片地址和图片名let image = new Image()// 解决跨域 Canvas 污染问题image.setAttribute('crossOrigin', 'anonymous')let names = 'image' + row.init_images.split('/').pop()console.log(names, 'names')image.onload = function () {let canvas = document.createElement('canvas')canvas.width = image.widthcanvas.height = image.heightlet context = canvas.getContext('2d')context.drawImage(image, 0, 0, image.width, image.height)let url = canvas.toDataURL('image/png') //得到图片的base64编码数据let a = document.createElement('a') // 生成一个a元素let event = new MouseEvent('click') // 创建一个单击事件a.download = names || 'photo' // 设置图片名称a.href = url // 将生成的URL设置为a.href属性a.dispatchEvent(event) // 触发a的单击事件}image.src = row.init_images
}
</script>