1 <template>
2 <view class="content">
3 <button type="primary" @click="selectImage">选择图片</button>
4 <canvas id="myCanvas" type="2d" :style="{width:canvasStyle.width + 'rpx',height:canvasStyle.height + 'rpx'}"></canvas>
5 </view>
6 </template>
7
8 <script>
9 export default {
10 data() {
11 return {
12 title: 'Hello',
13 canvas: null,
14 canvasStyle:{
15 width:750,
16 height:710
17 },
18 ctx: null
19 }
20 },
21 onReady() {
22 const query = wx.createSelectorQuery()
23 query.select('#myCanvas')
24 .fields({ node: true, size: true })
25 .exec((res) => {
26 const systemInfo = wx.getSystemInfoSync()
27 this.canvas = res[0].node
28 this.ctx = this.canvas.getContext('2d')
29 const dpr = systemInfo.pixelRatio
30 this.canvas.width = systemInfo.windowWidth * dpr //res[0].width * dpr
31 this.canvas.height = systemInfo.windowWidth * dpr //res[0].height * dpr
32 this.canvasStyle.width = this.canvas.width / dpr
33 this.canvasStyle.height = this.canvas.height / dpr
34 })
35 },
36 onl oad() {
37
38 },
39 methods: {
40 selectImage(){
41 const dpr = wx.getSystemInfoSync().pixelRatio
42 wx.chooseMedia({
43 count:6,
44 mediaType:['image'],
45 sourceType:['album', 'camera'],
46 sizeType:['original','compressed'],
47 success:async (res)=>{
48 wx.showLoading({
49 title: '数据处理中',
50 mask: true
51 })
52 const tempUrl = res.tempFiles[0].tempFilePath
53 let image = this.canvas.createImage();
54 image.src = tempUrl;
55 const imageInfo = await wx.getImageInfo({src:tempUrl})
56 image.onload = () => {
57 const ratio = this.canvasStyle.width / imageInfo.width
58 const width = ratio > 1 ? this.canvasStyle.width : imageInfo.width
59 const height = ratio > 1 ? imageInfo.height * ratio : imageInfo.height
60 this.canvas.width = width//res[0].width * dpr
61 this.canvas.height = height//res[0].height * dpr
62 this.canvasStyle.width = width
63 this.canvasStyle.height = height
64 this.ctx.drawImage(image, 0, 0, width, height);
65 let that = this
66 setTimeout(()=>{
67 wx.canvasToTempFilePath({ //裁剪对参数
68 canvasId: "myCanvas",
69 x: 0, //画布x轴起点
70 y: 0, //画布y轴起点
71 width: ratio > 1 ? imageInfo.width : uni.upx2px(width), //画布宽度
72 height: ratio > 1 ? imageInfo.height :uni.upx2px(height), //画布高度
73 destWidth: imageInfo.width,//ratio > 1 ? imageInfo.width : uni.upx2px(width) * dpr, //输出图片宽度
74 destHeight: imageInfo.height,//ratio > 1 ? imageInfo.height : uni.upx2px(height) * dpr, //输出图片高度
75 canvas: that.canvas,
76 quality: 1,
77 fileType: 'png',
78 success: (res) =>{
79 wx.saveImageToPhotosAlbum({
80 filePath:res.tempFilePath,
81 success:()=>{
82 wx.hideLoading()
83 }
84 })
85 },
86 fail: (e) =>{
87 console.log(e)
88 wx.hideLoading()
89 wx.showToast({
90 title: '出错啦...',
91 icon: 'loading'
92 })
93 }
94 },that);
95 }, 1000);
96 }
97 }
98 })
99 }
100 }
101 }
102 </script>
标签：canvas,dpr,imageInfo,demo,height,width,wx,图片 From： https://www.cnblogs.com/kitty-blog/p/16643154.html