APP根据图片地址进行64位转码方法

Vant组件（app）

网址：https://youzan.github.io/vant/#/zh-CN/quickstart

<van-field name="driverLicense" label="图片">
            <template #input>
              <van-uploader :after-read="onRead" v-model="driverList" :max-count="10" >
                <van-button icon="plus" >上传图片</van-button>
              </van-uploader>
            </template>
          </van-field>

• 根据图片地址进行64位转码

downloadIamge(imgsrc, name) { // 下载图片地址和图片名(图片不同源)
            var image = new Image()
            var that = this
            // 解决跨域 Canvas 污染问题
            image.setAttribute('crossOrigin', 'anonymous')
            image.onload = function() {
                var canvas = document.createElement('canvas')
                canvas.width = image.width
                canvas.height = image.height
                var context = canvas.getContext('2d')
                context.drawImage(image, 0, 0, image.width, image.height)
                var url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
                // console.log(url)
                if (name === 'photoUrl.png') {
                    that.driverList.push({ content: url })
                    that.imgBase64.push(url)
                } else if (name === 'photoUrl0.png') {
                    that.driverList.push({ content: url })
                    that.imgBase64.push(url)
                }
            }
            image.src = imgsrc
        },

• 上传图片转码

async  onRead(file) {
            // console.log(file)
            // 大于1.5MB的jpeg和png图片都缩小像素上传
            if (file.file.size > 1500000) {
            // 创建Canvas对象(画布)
                const canvas = document.createElement('canvas')
                // 获取对应的CanvasRenderingContext2D对象(画笔)
                const context = canvas.getContext('2d')
                // 创建新的图片对象
                const img = new Image()
                // 指定图片的DataURL(图片的base64编码数据)
                img.src = file.content
                // 监听浏览器加载图片完成，然后进行绘制
                img.onload = () => {
                    // 指定canvas画布大小，该大小为最后生成图片的大小
                    canvas.width = 800
                    canvas.height = 600
                    /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。*/
                    /* 如果不指定缩小的像素，图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后得到的图片就是张局部图。图片小于画布就会有黑边。*/
                    context.drawImage(img, 0, 0, 800, 600)
                    // 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
                    file.content = canvas.toDataURL(file.file.type, 0.92)
                    // 最后将base64编码的图片保存到数组中，留待上传。
                    if (this.driverList.length < 10) {
                        this.imgBase64.push(file.content)
                    }
                }
            } else {
            // 不做处理的jpg和png以及gif直接保存到数组
                if (this.driverList.length < 10) {
                    this.imgBase64.push(file.content)
                } else {
                    alert('最多上传10张图片')
                }
            }
        },

最后

以上就是激昂微笑为你收集整理的APP根据图片地址进行64位转码方法的全部内容，希望文章能够帮你解决APP根据图片地址进行64位转码方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。