uniapp九宫格图片

标签： 切图

html

<view>
        <view class="mycanvas">
            <canvas canvas-id="mycnavas" id="mycnavas" @click="cancas"></canvas>
        </view>
        <view class="newpohoto" @click="newpohoto">
            开始切图
        </view>
        <view class="newcanvas">
            <canvas canvas-id="img1"></canvas>
            <canvas canvas-id="img2"></canvas>
            <canvas canvas-id="img3"></canvas>
            <canvas canvas-id="img4"></canvas>
            <canvas canvas-id="img5"></canvas>
            <canvas canvas-id="img6"></canvas>
            <canvas canvas-id="img7"></canvas>
            <canvas canvas-id="img8"></canvas>
            <canvas canvas-id="img9"></canvas>
        </view>
        <view class="download" @click="download">
            下载图片
        </view>
</view>
    
<!--css布局这里就不公布了-->

js

onReady() {
            const ctx = uni.createCanvasContext('mycnavas')
            let img=new Image();
            img.src='../../../static/img/head.jpeg'
            ctx.drawImage('../../../static/img/head.jpeg', 0, 0, 300, 300)
            ctx.draw()  
        },
methods: {
    newpohoto(){
        const cxt = uni.createCanvasContext('mycnavas')
        var q = 1;
        for (var i = 0; i < 3; i++) {//横
            for (var j = 0; j <3; j++) {//纵
                let K=q；//很重要的一步pc上可能是正常的，手机上里层的q就会全部变成10所以要在这里赋值给局部
                uni.canvasGetImageData({canvasId:'mycnavas',x:j * 100,y:i * 100, width:100,height:100,success(res) {//复制目标画布
                    const data1 = new Uint8ClampedArray(res.data);//返回的图像像素数据
                    uni.canvasPutImageData({//粘贴的分割的画布
                         data: data1,
                         canvasId: 'img'+K,//对应切割画布
                         x: 0,
                         y: 0,
                         width:100,
                         height:100,
                         success(res1) {
                                uni.canvasToTempFilePath({//导出切割画布，指定区域的内容导出生成指定大小的图片
                                    x: 0,
                                    y: 0,
                                    width: 100,
                                    height: 100,
                                    destWidth: 100,//导出图片宽度
                                    destHeight: 100,//导出图片高度
                                    canvasId: 'img'+K,//对应画布
                                    success: function(res) {
                                        //tempFilePath 为 base64
                                        // console.log(res.tempFilePath)
                                        arr.push(res.tempFilePath)//获取到的图片路径放入全局
                                    } 
                                })
                        },
                        fail(err) {
                          console.log(err)
                        }
                   }) 
                }});   
        q++;
        }
    }
},