div某个模块转图片下载到本地

qq_21460133

已于 2023-08-21 09:44:28 修改

阅读量545

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 html

于 2023-03-27 17:17:07 首次发布

本文链接：https://blog.youkuaiyun.com/qq_21460133/article/details/129799414

该代码示例展示了在Vue2环境下，如何使用html2canvas库获取图片元素的canvas表示，然后转换为DataURL，最终实现二维码图片的下载功能。过程中涉及了跨域设置和图片尺寸处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意：本示例依托于vue2

<template>
<div>
<div class="main-con">
            <div class="ercode" ref="imageWrapper">
                <div class="ercode-t">
                    <div class="ercode-title">图片名字</div>
                </div>
                <img class="ercode-img" :src="图片地址" />
            </div>
        </div>
        <p slot="footer" class="dialog-footer">
            <button size="mini" @click="onExport">下载二维码</button>
        </p>
<div>
</template>

<script>
export default {
    methods:{
    onExport() {
            const clientWidth = this.$refs.imageWrapper.offsetWidth
            const clientHeight = this.$refs.imageWrapper.offsetHeight
            const kh = [clientWidth, clientHeight]
            html2canvas(this.$refs.imageWrapper, {
                useCORS: true,
                logging: true
            }).then(canvas => {
                const dataURL = canvas.toDataURL('image/png')
                this.download(dataURL, kh)
            })
        },
        getUrlBase64(url, kh) {
            return new Promise(resolve => {
                let canvas = document.createElement('canvas')
                const ctx = canvas.getContext('2d')
                const img = new Image()
                img.crossOrigin = 'Anonymous' // 允许跨域
                img.src = url
                img.onload = () => {
                    // eslint-disable-next-line prefer-destructuring
                    canvas.height = kh[1]
                    canvas.width = kh[0]
                    ctx.drawImage(img, 0, 0, kh[0], kh[1])
                    const dataURL = canvas.toDataURL('image/png')
                    canvas = null
                    resolve(dataURL)
                }
            })
        },
        download(imgUrl, kh) {
            this.getUrlBase64(imgUrl, kh).then(base64 => {
                const link = document.createElement('a')
                link.href = base64
                link.download = `${this.data.name}.png`
                link.click()
            })
        }, // 点击下载当前截图
}

}

</script>