| | |
| | | |
| | | export default { |
| | | name: 'CImageCompressor', |
| | | props: { |
| | | maxSize: { |
| | | type: Number, |
| | | default: 1600, |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | | // canvas id |
| | |
| | | }, |
| | | methods: { |
| | | $compress(tempPaths, callback) { |
| | | this.imgBlobs = []; // 重置已转图片 |
| | | if (typeof this.canvasContext === 'undefined') { |
| | | this.canvasContext = Taro.createCanvasContext(this.cavId, this); |
| | | } |
| | |
| | | } |
| | | // 完成图片压缩 |
| | | else { |
| | | console.log(this.imgBlobs); |
| | | callback(this.imgBlobs); |
| | | } |
| | | }); |
| | | }; |
| | |
| | | src: tempPath, |
| | | success: res => { |
| | | const size = this._limitSize(res); |
| | | const drawSet = this._creatDrawSet(res, size); |
| | | this._drawImage(tempPath, drawSet, compress => { |
| | | this.imgBlobs.push({ |
| | | source: tempPath, |
| | | compress, |
| | | // 网页图片压缩 |
| | | if (process.env.TARO_ENV === 'h5') { |
| | | const drawSet = this._creatDrawSet(res, size); |
| | | this._drawImage(tempPath, drawSet, compress => { |
| | | this.imgBlobs.push({ |
| | | source: tempPath, |
| | | compress, |
| | | }); |
| | | callback(); |
| | | }); |
| | | callback(); |
| | | }); |
| | | } |
| | | // 小程序图片压缩 |
| | | else if (process.env.TARO_ENV === 'weapp') { |
| | | Taro.compressImage({ |
| | | src: tempPath, |
| | | quality: 60, |
| | | compressedWidth: size[0], |
| | | compressHeight: size[1], |
| | | success: cps => { |
| | | this.imgBlobs.push({ |
| | | source: tempPath, |
| | | compress: cps.tempFilePath, |
| | | }); |
| | | callback(); |
| | | }, |
| | | fail: err => { |
| | | this.imgBlobs.push({ |
| | | source: tempPath, |
| | | compress: tempPath, |
| | | }); |
| | | callback(); |
| | | }, |
| | | }); |
| | | } |
| | | }, |
| | | }); |
| | | }, |
| | |
| | | let width, height; |
| | | // 宽大于高,按宽算 |
| | | if (res.width >= res.height) { |
| | | width = Math.min(res.width, 1600); |
| | | width = Math.min(res.width, this.maxSize); |
| | | height = Math.round(width / rate); |
| | | } |
| | | // 按高算 |
| | | else { |
| | | height = Math.min(res.height, 1600); |
| | | height = Math.min(res.height, this.maxSize); |
| | | width = Math.round(height * rate); |
| | | } |
| | | return [width, height]; |
| | |
| | | _setCanvasSize(width, height) { |
| | | this.cavWidth = width; |
| | | this.cavHeight = height; |
| | | if (process.env.TARO_ENV === 'h5') { |
| | | $(this.$refs.canvas.$el) |
| | | .find('canvas') |
| | | .attr('width', width) |
| | | .attr('height', height); |
| | | } |
| | | // TODO: 小程序中的 canvas 重设 |
| | | $(this.$refs.canvas.$el) |
| | | .find('canvas') |
| | | .attr('width', width) |
| | | .attr('height', height); |
| | | }, |
| | | _creatDrawSet(res, [width, height]) { |
| | | const orientation = res.orientation || 'up'; |
| | |
| | | const [key, params] = step; |
| | | if (key === 'drawImage') { |
| | | // 使用图片 |
| | | const img = new Image(); |
| | | const img = (() => { |
| | | if (typeof Image === 'undefined') { |
| | | console.log(this.$refs.canvas); |
| | | console.log($('canvas[canvas-id=' + this.cavId + ']')); |
| | | |
| | | const query = Taro.createSelectorQuery(); |
| | | query |
| | | .select('canvas[canvas-id=' + this.cavId + ']') |
| | | .boundingClientRect() |
| | | .exec(res => { |
| | | console.log(res); |
| | | }); |
| | | return this.$refs.canvas.createImage(); |
| | | } else { |
| | | return new Image(); |
| | | } |
| | | })(); |
| | | img.src = tempPath; |
| | | this.canvasContext.drawImage(img, ...params); |
| | | } else { |