uniapp 将图片转成JPG格式

<template>

<view style="width: 100%; height: 100%;">

<image :src="imagePath" lazy-load style="width: 100%; height: 100%;"></image>

<canvas

style="background-color: red;"

:style="{width: target.width + 'px', height: target.height + 'px'}" canvas-id="target"></canvas>

</view>

</template>

<script>

export default {

data() {

return {

targetContext: null,

imagePath: '',

target: {

width: 300,

height: 300

}

}

},

onLoad(e) {

console.log(e);

// this.imagePath = e.imagepath;

this.targetContext = uni.createCanvasContext("target", this); //第一个画布

this.imageDetailMsg(e.imagepath);

},

methods: {

imageDetailMsg(imageUrl) {

let self = this;

uni.getImageInfo({

src: imageUrl,

success: function(imageInfo) {

console.log(imageInfo);

setTimeout(() => {

self.targetContext.drawImage(imageInfo.path, 0, 0, 300, 300, 0, 0, 300, 300);

self.targetContext.draw(false, () => {

uni.canvasToTempFilePath({

canvasId: "target",

fileType:'jpg',

success: (res) => {

var path = res.tempFilePath;

console.log('裁剪后的图片',res);

self.imagePath = path;

},

fail: (ev) => {

console.log(ev);

},

complete: () => {

}

}, self);

});

}, 100);

}

})

},

}

}

</script>

<style>

</style>

相关推荐
Little_Code几秒前
uniapp 如何使用vuex store (亲测)
uni-app·vuex·store
咸虾米_3 分钟前
uniCloud云对象调用第三方接口,根据IP获取用户归属地的免费API接口,亲测可用
网络·uni-app·unicloud
脸红ฅฅ*的思春期27 分钟前
信息收集—JS框架识别&泄露提取&API接口泄露&FUZZ爬虫&插件项目
javascript·信息收集·js信息泄露
One_Blanks28 分钟前
网络安全-HTML基础
前端·安全·html
豆包MarsCode1 小时前
使用 Vue 配合豆包MarsCode 实现“小恐龙酷跑“小游戏
开发语言·前端·javascript·vue.js·html
四喜花露水1 小时前
vue2.x elementui 固定顶部、左侧菜单与面包屑,自适应 iframe 页面布局
前端·elementui·vue
看山还是山,看水还是。1 小时前
Redis 命令
前端·数据库·redis·bootstrap
会飞的郁金香1 小时前
第8章 利用CSS制作导航菜单
前端·css
凉风听雪1 小时前
免费HTML模板和CSS样式网站汇总
前端·javascript·css·html
西装暴徒_121381 小时前
基于node一键发布到服务器的js脚本
运维·服务器·javascript