html2Canvas生成图片并上传

ithack commented 4 years ago

html2canvas(document.querSelect("Dom"), { backgroundColor: null, useCORS: true }).then(canvas => { let domToImgUrl = canvas.toDataURL("image/jpeg", 0.92) // 下面是将图片的base64以blob形式上传到文件服务器，获取图片地址 let domImageArr = domToImgUrl.split(",") let mime = domImageArr[0].match(/:(.*?);/)[1] // 获取图像类型 let decodeData = atob(domImageArr[1]) // 解码base64 let decodeDataLength = decodeData.length let uInt8array = new Uint8Array(decodeDataLength) //Uint8Array类型数组表示的8位无符号整数数组。内容被初始化为0 while (decodeDataLength--) { uInt8array[decodeDataLength] = decodeData.charCodeAt(decodeDataLength) } let blob = new Blob([uInt8array], { type: mime }) let formData = new FormData() formData.append("file", blob, "image.png") // 上传该图片 updateImg(formData).then(data => {

})

shuiRong commented 3 years ago

哥们儿，Github 支持代码格式的，就Markdown语法。而且你这代码还少了个俩括号：})

html2canvas(document.querSelect('Dom'), {
    backgroundColor: null,
    useCORS: true,
}).then((canvas) => {
    let domToImgUrl = canvas.toDataURL('image/jpeg', 0.92)
    // 下面是将图片的base64以blob形式上传到文件服务器，获取图片地址
    let domImageArr = domToImgUrl.split(',')
    let mime = domImageArr[0].match(/:(.*?);/)[1] // 获取图像类型
    let decodeData = atob(domImageArr[1]) // 解码base64
    let decodeDataLength = decodeData.length
    let uInt8array = new Uint8Array(decodeDataLength)
    //Uint8Array类型数组表示的8位无符号整数数组。内容被初始化为0
    while (decodeDataLength--) {
        uInt8array[decodeDataLength] = decodeData.charCodeAt(decodeDataLength)
    }
    let blob = new Blob([uInt8array], { type: mime })
    let formData = new FormData()
    formData.append('file', blob, 'image.png')
    // 上传该图片
    updateImg(formData).then((data) => {})
})

shuiRong commented 3 years ago

（现在）html2canvas支持直接转blog了：

html2canvas(document.getElementById('img')).then((canvas) => {
    var imgurl = canvas.toBlob((blob) => {
        //以时间戳作为文件名 实时区分不同文件 按需求自己定义就好
        let filename = `${new Date().getTime()}.jpg`
        //转换canvas图片数据格式为formData
        let file2 = new File([blob], filename, { type: 'image/jpg' })
        let formData = new FormData()
        formData.append('file', file2)
        //将转换为formData的canvas图片 上传到服务器
        this.axios.post('后台接口地址', formData).then((res) => {
            //图片上传成功之后，再调用对应的其他接口，传递指定的参数
            if (res.data.state == 200) {
                this.axios
                    .post('后台接口地址', {
                        img: res.data.data,
                        type: 0,
                    })
                    .then((res) => {
                        console.log(res)
                    })
            }
        })
    })
})

从这儿copy

ithack / ithack.github.io

html2Canvas生成图片并上传 #17