uni-app canvas 画布

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app canvas 画布

问题描述

uni app ios render.js canvas 设置了img.crossOrigin = “anonymous”; 怎么不往下执行

let self = this;  
img.src = data;  
// img.crossOrigin = "Anonymous"  
img.crossOrigin = "anonymous";   
img.onload = function(e) {  
    var canvas = document.createElement("canvas");  
    var ctx = canvas.getContext("2d");  
    //在css中不要直接给img设置宽高,否则此处会获取到css设置的值  
    var width = img.width;  
    var height = img.height;  
    //比较图片宽高设置图片显示和canvas画布尺寸  
    if (width > height) {  
        if (width >= 1080) {  
            height = Math.round(height *= 1080 / width);  
            width = 1080;  
        }  
    } else {  
        if (height >= 1440) {  
            width = Math.round(width *= 1440 / height);  
            height = 1440;  
        }  
    }  
    canvas.width = width; //设置新的图片的宽度  
    canvas.height = height; //设置新的图片的长度  
    ctx.drawImage(img, 0, 0, width, height); //绘图  
    try {  
        // var dataURL = canvas.toDataURL("image/jpeg", 0.8);  
        canvas.toBlob((blob) => {  
            // 调用回调函数，传入压缩后的图片数据    
            console.log(blob, '----blob')  
        }, 'image/jpeg', 0.8);  
        // console.log(dataURL,'--dataURL')  
    } catch (error) {  
        console.log(error, '-----error')  
    }  
    // var dataURL = canvas.toDataURL("image/jpeg", 0.8); //供img标签使用的src路径  
    // self.$ownerInstance.callMethod('NewuploadFile', {  
    //  fileUrl: dataURL,  
    //  url: data,  
    // })  
}

Harmonyos Next教程
1 回复

在uni-app中，使用<canvas>组件可以在页面上绘制图形。以下是一个简单的示例，展示了如何在uni-app中使用canvas绘制一些基本的图形，包括矩形、圆形和文本。

首先，在你的页面的.vue文件中，添加一个<canvas>组件，并指定其canvas-id，例如myCanvas。

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width: 300px; height: 300px;"></canvas>
  </view>
</template>

接下来，在页面的onLoad生命周期函数中，使用uni-app提供的uni.createCanvasContext方法来获取canvas的绘图上下文，并使用该上下文进行绘图。

<script>
export default {
  onLoad() {
    // 获取canvas绘图上下文
    const ctx = uni.createCanvasContext('myCanvas');

    // 设置填充颜色为红色
    ctx.setFillStyle('red');
    // 绘制一个矩形，左上角坐标为(10, 10)，右下角坐标为(150, 100)
    ctx.fillRect(10, 10, 140, 90);

    // 设置填充颜色为蓝色
    ctx.setFillStyle('blue');
    // 设置线条宽度
    ctx.setLineWidth(5);
    // 绘制一个圆形，圆心坐标为(200, 50)，半径为40
    ctx.beginPath();
    ctx.arc(200, 50, 40, 0, 2 * Math.PI);
    // 填充圆形
    ctx.fill();
    // 绘制圆形边框
    ctx.stroke();

    // 设置字体大小和颜色
    ctx.setFontSize(20);
    ctx.setFillStyle('black');
    // 在指定位置绘制文本
    ctx.fillText('Hello uni-app!', 50, 200);

    // 将绘制内容绘制到canvas上
    ctx.draw();
  }
}
</script>

在这个示例中，我们首先通过uni.createCanvasContext方法获取了canvas的绘图上下文ctx。然后，我们使用ctx的setFillStyle、fillRect、arc、fill、stroke、setFontSize和fillText等方法来绘制矩形、圆形和文本。

请注意，canvas-id是canvas的唯一标识符，用于获取对应的canvas绘图上下文。另外，所有的绘图操作都需要在ctx.draw()方法调用之前完成，ctx.draw()方法会将之前的所有绘图操作绘制到canvas上。

这个示例展示了uni-app中canvas的基本用法，你可以根据需要进一步扩展和修改这个示例，以实现更复杂的绘图功能。

回到顶部