js 将图片转换为base64编码

JavaScript099

js 将图片转换为base64编码,第1张

将图片转换为Base64

获取图片Base64编码

方式一:Blob和FileReader 对象

实现原理:

使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = "blob"]

使用FileReader 对象接收blob

方式二:canvas.toDataURL()方法

实现原理:

使用canvas.toDataURL()方法

需要解决图片跨域问题 image.crossOrigin = ''

使用了Jquery库的$.Deferred()方法

  从IE10+浏览器开始,所有浏览器就原生提供了Base64编码、解码方法,不仅可以用于浏览器环境,Service Worker环境也可以使用。

方法名就是 atob 和 btoa ,具体语法如下:

IE8/IE9的polyfill

  当下,仍有不少PC项目还需要兼容IE9,所以,我们可以专门针对这些浏览器再引入一段ployfill脚本或者一个JS文件即可。

[if IE] 表示所有IE浏览器,由于IE10+浏览器已经放弃了著名的IE条件注释的支持,Chrome等浏览器本身就不支持这个IE私有语法,因此,很天然的,上面一段script引入只在IE9-浏览器下有效。而我们本来就希望只IE8,IE9浏览器引入ployfill,于是正好完美衔接上。

也就是原生支持atob和btoa方法的浏览器认为就是一段无需关心的HTML注释,不支持atob和btoa的IE9及其以下浏览器则会加载我们的base64-polyfill.js,使浏览器也支持 window.btoa 和 window.atob 这个语法。

开源的 base64.js ,使用很简单,浏览器引入该JS文件,然后Base64编码这样:

解码就调用 decode 方法,如下:

有时候会遇到后端需要前端获取的图片文件转换成base64,在传给后台

小程序有专门的选择图片接口,

wx.chooseImage(OBJECT)

但是这个只是返回一个图片的临时路径,并不是文件数据本身。

小程序暂时没有接口直接转base64的

所以我们需要使用canvas和canvasGetImageData(小程序版本1.9.0以后要才有)先获取图片内容,

再通过插件upng.js插件实现图片转base64(所需插件文件附件中)

1. 把upng.js和pako.min.js文件放到项目中

2. 在pages下的页面js文件中导入

var upng = require('../../utils/upng.js')

这里只需要导入npng.js ,pako.min.js是在npng,js里面调用

3. 建一个canvas

chooseImage">人脸测试  

// 画布

// 生成base64位图片展示 变量imgbase64

need-to-insert-img

4. 添加js点击chooseImage事件

chooseImage: function() {

        var that = this

        var coss_signature = wx.getStorageSync('cos_signature')

        var canvasID = "imgCanvas"

        var canvas = wx.createCanvasContext(canvasID)

        wx.chooseImage({

            sourceType: ['album', 'camera'],

            sizeType: ['original'],

            count: 1,

            success: function (res) {

                var tempFilePaths = res.tempFilePaths

                // 获取文件路径

                var filePath = tempFilePaths[0]

                // 1. 绘制图片至canvas

                canvas.drawImage(filePath, 0, 0, 300, 200)

                // 绘制完成后执行回调,API 1.7.0

                canvas.draw(false, function(res){

                    // 2. 获取图像数据, API 1.9.0

                    wx.canvasGetImageData({

                        canvasId: canvasID,

                        x: 0,

                        y: 0,

                        width: 300,

                        height: 200,

                        success(res) {

                          // 3. png编码

                          let pngData = upng.encode([res.data.buffer], res.width, res.height)

                          // 4. base64编码

                          let base64 = wx.arrayBufferToBase64(pngData)

                          // ...

                          that.setData({

                            imgbase64: base64

                          })

                        }

                    })

                })

            }

        })

    }

5. 实现

need-to-insert-img

need-to-insert-img

tips

画布画的图片的长和宽是固定的,这个按照自己需求设置。

可以通过小程序的

wx.getImageInfo(OBJECT)

获取长和宽

相关链接

upng.js:  https://github.com/photopea/UPNG.js

wx-cardscanner:  https://github.com/zh8637688/wx-cardscanner 有时候会遇到后端需要前端获取的图片文件转换成base64,在传给后台

小程序有专门的选择图片接口,

但是这个只是返回一个图片的临时路径,并不是文件数据本身。

小程序暂时没有接口直接转base64的

所以我们需要使用canvas和canvasGetImageData(小程序版本1.9.0以后要才有)先获取图片内容,

再通过插件upng.js插件实现图片转base64(所需插件文件附件中)

1. 把upng.js和pako.min.js文件放到项目中

2. 在pages下的页面js文件中导入

var upng = require('../../utils/upng.js')

这里只需要导入npng.js ,pako.min.js是在npng,js里面调用

3. 建一个canvas

chooseImage">人脸测试  

// 画布

// 生成base64位图片展示 变量imgbase64

4. 添加js点击chooseImage事件

chooseImage: function() {

        var that = this

        var coss_signature = wx.getStorageSync('cos_signature')

        var canvasID = "imgCanvas"

        var canvas = wx.createCanvasContext(canvasID)

        wx.chooseImage({

            sourceType: ['album', 'camera'],

            sizeType: ['original'],

            count: 1,

            success: function (res) {

                var tempFilePaths = res.tempFilePaths

                // 获取文件路径

                var filePath = tempFilePaths[0]

                // 1. 绘制图片至canvas

                canvas.drawImage(filePath, 0, 0, 300, 200)

                // 绘制完成后执行回调,API 1.7.0

                canvas.draw(false, function(res){

                    // 2. 获取图像数据, API 1.9.0

                    wx.canvasGetImageData({

                        canvasId: canvasID,

                        x: 0,

                        y: 0,

                        width: 300,

                        height: 200,

                        success(res) {

                          // 3. png编码

                          let pngData = upng.encode([res.data.buffer], res.width, res.height)

                          // 4. base64编码

                          let base64 = wx.arrayBufferToBase64(pngData)

                          // ...

                          that.setData({

                            imgbase64: base64

                          })

                        }

                    })

                })

            }

        })

    }

5. 实现

tips

画布画的图片的长和宽是固定的,这个按照自己需求设置。

可以通过小程序的

获取长和宽

相关链接

upng.js:  https://github.com/photopea/UPNG.js

wx-cardscanner:  https://github.com/zh8637688/wx-cardscanner