【快应用】画布生成图片分辨率计算
【现象描述】
使用toTempFilePath()把当前画布指定区域的内容导出生成指定大小的图片，最终保存到手机上的分辨率和设置的destWidth（输出的图片的宽度）、destHeight（输出的图片的高度）不一致的问题。
如图：
【计算方法】
通过device.getInfo获取windowWidth、windowHeight、windowLogicWidth、windowLogicHeight。
公式为：
（1）输出的图片的宽度：windowWidth*destWidth/ windowLogicWidth
（2）输出的图片的高度：windowHeight* destHeight/ windowLogicHeight
以上图demo为例：
即：
输出的图片的宽度：1080*500/750=720
输出的图片的高度：1995*400/1385=576
Demo如下：
<template>
<!-- There can only be one root node in the template -->
<div class="container">
<text class="text">{{message}}</text>
<image src="../../Common/logo.png" id="image" style="margin-top: 20px"></image>
<canvas id="1Canvas" style="background-color: #FFFF00; margin-top: 20px" onlongtap="longtapfun" ontouchmove="touchmove" ontouchstart="touchstart"></canvas>
<input class="buttons" type="button" onclick="click1" value="drawfillStyleforColor"></input>
<image src="{{imageSrc}}" id="image2" style="margin-top: 20px"></image>
</div>
</template>
<style>
.container {
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
}
.title {
font-size: 100px;
}
#1Canvas {
width: 500px;
height: 200px;
}
.text {
font-size: 50px;
color: #0000ff;
border: 1px;
}
</style>
<script>
import media from '@system.media';
import device from '@system.device'
module.exports = {
data: {
title: 'World',
message: '',
testparams: '2',
imageSrc: ''
},
onInit() {
this.$page.setTitleBar({
text: 'Canvas',
textColor: '#ffffff',
backgroundColor: '#007DFF',
backgroundOpacity: 0.5
})
this.getInfo();
},
touchstart: function (e) {
console.log('yyyy' + 'bindtouchstart' + 'e.changedTouches.length =' + e.changedTouches.length)
},
touchmove: function (e) {
console.log('yyyy' + 'bindtouchmove' + ' e.changedTouches.length =' + e.changedTouches.length + e.changedTouches[0].identifier)
},
// 获取设备信息
getInfo() {
device.getInfo({
success: function (ret) {
console.log("handling success:", JSON.stringify(ret));
},
fail: function (erromsg, errocode) {
console.log("message:", erromsg, errocode);
}
})
},
click1: function () {
this.message = 'drawfillStyleforColor'
var test = this.$element('1Canvas')
var ctx = test.getContext('2d')
console.log('ctx.fillStyle 555 >> ' + ctx.fillStyle)
var img = new Image()
img.src = 'https://developer.huawei.com/dev_index/img/logo_ch.png'
img.onload = () => {
console.log('Image load success.')
var pat = ctx.createPattern(img, 'repeat')
ctx.rect(0, 0, 500, 200)
ctx.fillStyle = pat
console.log('ctx.fillStyle 666 >> ' + ctx.fillStyle)
ctx.fill()
test.toTempFilePath({
x: 0,
y: 0,
width: 500,
height: 400,
destWidth: 500,
destHeight: 400,
fileType: 'png',
quality: 1.0,
success: (data) => {
this.imageSrc = data.uri
console.log(`Canvas toTempFilePath success ${data.uri}`)
console.log(`Canvas toTempFilePath success ${data.tempFilePath}`)
},
fail: (data) => {
console.log('Canvas toTempFilePath data =' + data)
},
complete: () => {
console.log('Canvas toTempFilePath complete.')
}
})
}
img.onerror = function () {
console.log('Image load fail.')
}
media.saveToPhotosAlbum({
uri: this.imageSrc,
folderName: 'custom-folder',
success: function (data) { console.log("save success: "); },
fail: function (data, code) {
console.log("handling fail, code=" + code);
}
})
},
saveToPhotosAlbum() {
},
errorfun: function () {
console.log('canvas onerror')
},
longtapfun: function () {
console.log('canvas longtap')
}
}
</script>
欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
