首页 > 编程语言 >小程序中实现图片旋转后保存

小程序中实现图片旋转后保存

时间:2023-08-18 11:35:46浏览次数:43  
标签:canvas degree image ctx 保存 height width 旋转 图片

嫌麻烦的可以直接点击小程序代码片段体验,下面是代码:

<image
    src="https://qcloudimg.tencent-cloud.cn/raw/7ff4215737d7877346c0ec6ea1514d94.jpg"
    mode="widthFix"
    style="width: 100vw;"
/>
<picker mode="selector"
    range="{{options}}"
    value="{{degree}}"
    range-key="text"
    bindchange="handleChange"
>
    <View>当前旋转: {{degree * 90}}° ></View>
</picker>
<canvas id="myCanvas" type="2d" style="width:{{canvasStyle.width}};height:{{canvasStyle.height}}" />
<button bindtap="saveImg" type="primary">保存</button>
const app = getApp()

Page({
    data: {
        tempFilePath: '',
        canvasStyle: {width: '100vw', height: '300px'},
        options: [
        {
            text: '0°',
        },
        {
            text: '90°',
        },
        {
            text: '180°',
        },        {
            text: '270°',
        },
    ],
        degree: 0
    },
    handleChange(e) {
        this.setData({
            degree: Number(e.detail.value)
        });
        this.rotate(Number(e.detail.value * 90))
    },
    onl oad() {
        this.rotate(this.data.degree * 90);
    },
    rotate(degree) {
        console.log(degree)
        wx.createSelectorQuery()
            .select('#myCanvas') // 在 WXML 中填入的 id
            .fields({ node: true, size: true })
            .exec((res) => {
                // Canvas 对象
                const canvas = res[0].node
                // 渲染上下文
                const ctx = canvas.getContext('2d')
                // 图片对象
                const image = canvas.createImage()
                const transformCtx = (degree, width, height) => {
                    switch(degree) {
                        case Math.PI/2: {
                            ctx.translate(height, 0);
                            ctx.rotate(degree);
                            return {width:height, height:width};
                        } 
                        case Math.PI: {
                            ctx.translate(width, height);
                            ctx.rotate(degree);
                            return {width, height};
                        } 
                        case 3 * Math.PI/2: {
                            ctx.translate(0, width);
                            ctx.rotate(degree);
                            return {width:height, height:width};
                        } 
                        default: {
                            return {width: height}
                        } 
                    }
                }
                // 图片加载完成回调
                image.onload = () => {
                    // 将图片绘制到 canvas 上
                    console.log(image.width, image.height);
                    // 初始化画布大小
                    const dpr = wx.getWindowInfo().pixelRatio
                    if (degree === 90 || degree === 270) {
                        canvas.width = image.height
                        canvas.height = image.width
                    } else {
                        canvas.width = image.width
                        canvas.height = image.height
                    }
                    // canvas css 的长宽比和 canvas 的长宽比保持一致,防止图片被拉伸
                    this.setData({
                        canvasStyle: {
                            width: `${canvas.width/dpr}px`,
                            height: `${canvas.height/dpr}px`,
                        }
                    })

                    ctx.clearRect(0,0,canvas.width,canvas.height)
                    ctx.scale(dpr, dpr)
                    const {imgWidth, imgHeight } = transformCtx(degree * Math.PI / 180, image.width/dpr, image.height/dpr)
                    ctx.drawImage(image, 0, 0, image.width/dpr, image.height/dpr);
                    wx.canvasToTempFilePath({
                        x: 0,
                        y:0,
                        width: imgWidth,
                        height: imgHeight,
                        canvas,
                        fileType: 'jpg',
                        success: ({tempFilePath}) =>{
                            this.setData({tempFilePath});
                            console.log(tempFilePath);
                        }
                    })
                }
                // 设置图片src
                image.src = 'https://qcloudimg.tencent-cloud.cn/raw/7ff4215737d7877346c0ec6ea1514d94.jpg'
            })
    },
    saveImg() {
        wx.saveImageToPhotosAlbum({
            filePath: this.data.tempFilePath,
            success(res) {
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 1000,
              })
            },
        });
    }
})

标签:canvas,degree,image,ctx,保存,height,width,旋转,图片
From: https://www.cnblogs.com/imgss/p/17639930.html

相关文章

  • 脚本保存
    #!/bin/bash#LoRAtrainscriptby@Akegarasumodifyby@bdsqlsz#TrainModel|训练模式model="sdxl_lora"#lora、db、sdxl_lora、sdxl_db、contralnet(unfinished)#Traindatapath|设置训练用模型、图片pretrained_model="./sd-models/astreapixieXL.safetenso......
  • 6 图片标签
    6图片标签在HTML中,图像由标签定义的,它可以用来加载图片到html网页中显示。网页开发过程中,有三种图片格式被广泛应用到web里,分别是jpg、png、gif。img标签的属性:/*src属性:指定图像的URL地址,是英文source的简写,表示引入资源。src的值可以是本地计算机存储的图片的地......
  • 【快应用】图片放大预览功能的实现
     【关键词】放大、image、background-position【问题背景】快应用中并没有直接的放大图片预览的功能,然而是可以利用现有的功能去实现图片的放大预览功能的。这样在快应用中浏览页面内容遇到图片时,遇到一些小图,觉得图片内容是不错的,就可以点击图片局部地方,放大查看图片的部分细节,提......
  • vue3项目,vie框架,相对路径图片,测试时正常显示,发布后不显示问题解决方案
    参考Vite官网的说明,修改图片的引用路径后,图片发布后可以正常显示constimgUrl=newURL('./img.png',import.meta.url).hrefdocument.getElementById('hero-img').src=imgUrl官网地址: https://cn.vitejs.dev/guide/assets.html ......
  • 基于 Easysearch kNN 搭建即时图片搜索服务
    环境准备启动 Easysearch 服务:#Makesureyourvm.max_map_countmeetstherequirementsudosysctl-wvm.max_map_count=262144dockerrun-it--rm-p9200:9200\-e"discovery.type=single-node"\-eES_JAVA_OPTS="-Xms512m-Xmx512m"\......
  • HTML图片元素
    1.<img>标签作用:给网页插入图片常用属性:src(必需):“source”,表示来源,即为图片地址。alt(必需):指定图像不能显示时候的替代文本。width,height:宽度和高度,单位:像素px或百分比%。摘录自:https://man.ilovefishc.com/pageHTML5/img.html......
  • UMEditor 复制word里面带图文的文章,图片可以直接显示
    ​ 百度ueditor新增的将word内容导入到富文本编辑框的功能怎么没有啊,...ueditor实现word文档的导入和下载功能的方法:1、UEditor没有提供word的导入功能,只能说是粘贴复制。2、方案:用poi来提供word导入,思路是将word转换为html输出,再用UEditor提供的setContent()方法将html的内容......
  • 百度ueditor 复制word里面带图文的文章,图片可以直接显示
    ​ 1.编辑器修改(可选)1.1在 ueditor/config.json 中添加代码块    /* 上传word配置 */    "wordActionName":"wordupload",/* 执行上传视频的action名称 */    "wordFieldName":"upfile",/* 提交的视频表单名称 */    "wordPathFormat":"/p......
  • 百度ueditor编辑器 复制word里面带图文的文章,图片可以直接显示
    ​ 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。加入下面的代码://判断剪......
  • 百度编辑器 复制word里面带图文的文章,图片可以直接显示
    ​ 由于工作需要必须将word文档内容粘贴到编辑器中使用但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题考虑到自己除了工作其他时间基本上不使用windows,因此打算使用nodejs来解......