canvas转换图片

html

 <div class="canvas">
        <div class="name">
            <span>请输入您的姓名:</span>
            <input type="text" v-model="name">
            <button @click="synthesis()">合成</button>
        </div>
        <canvas id="" ref="canvasBox">
        </canvas>
        <img :src="imgUrl" alt="">
        <input type="file" accept="image/*" class="unplone" @change="uploadImage(e)" />
        <button @click="send">发送</button>
    </div>

JavaScript

<script setup>
import { ref, reactive, computed, watchEffect, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, toRefs, toRaw, provide, inject, } from 'vue'
import { Upload } from '@/api/index'
const canvasBox = ref(null)
let data = reactive({
    name: '',
    url: 'http://t15.baidu.com/it/u=2027854191,2160613474&fm=224&app=112&f=JPEG?w=240&h=240',

    imgUrl: '',
    // canvas的Ratio
    ratio: 1
});
let { name, url, imgUrl, ratio } = toRefs(data);
// 上传图片
async function uploadImage(e) {
    var e = window.event || e; // change事件获取到的数据
    console.log(e.target.files[0])
    console.log(URL.createObjectURL(e.target.files[0]))
    let res2 = await Upload({
        file: e.target.files[0],
        userId: '11111111',
    });
}
function synthesis() {
    let w = canvasBox.value.width
    let h = canvasBox.value.height
    var ctx = canvasBox.value.getContext('2d');
    var img = new Image();
    img.src = url.value;

    img.setAttribute("crossOrigin", 'Anonymous')
    img.onload = function () {
        ctx.beginPath();
        ctx.drawImage(img, 0, 0, w, h);
        ctx.closePath()

        ctx.beginPath();
        ctx.font = '20px Verdana'
        ctx.textAlign = 'left'
        ctx.textBaseline = 'middle'
        ctx.fillStyle = "red"
        let width = ctx.measureText(name.value).width

        let l = w - width - 10

        ctx.fillText(name.value, l, h - 20, w)
        ctx.closePath()
        var imgsrcs = canvasBox.value.toDataURL()
        imgUrl.value = imgsrcs
    }


}
function changeBase64ToBlob(base64, name) {
    let base64Arr = base64.split(',');
    console.log(base64Arr);
    let imgType = '';
    let base64String = '';
    if (base64Arr.length > 1) {
        // 去掉图片base64头信息
        base64String = base64Arr[1];
        imgType = base64Arr[0].substring(base64Arr[0].indexOf(':') + 1, base64Arr[0].indexOf(';')); // 获取图片类型
    }
    // 将base64解码，atob() 方法用于解码使用 base-64 编码的字符串。
    let bytes = atob(base64String);
    let bytesCode = new ArrayBuffer(bytes.length);
    // 转换为类型化数组，Uint8Array 数组类型表示一个8位无符号整型数组，创建时内容被初始化为0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。
    let byteArray = new Uint8Array(bytesCode);
    // 将base64转换为ascii码
    for (let i = 0; i < bytes.length; i++) {
        byteArray[i] = bytes.charCodeAt(i);// 对类型化数组进行赋值
    }
    let blobData = new Blob([bytesCode], { type: imgType });
    console.log(blobData);
    let imgSuffix = '.' + imgType.split('/')[1] // 获取图片后缀
    console.log(imgSuffix);
    let imageFile = new File([blobData], name + imgSuffix) // 将blob转换为file类型
    return imageFile
}

async function send() {
    let res1 = await changeBase64ToBlob(imgUrl.value, "fileName")
    console.log(res1)
    // console.log(URL.createObjectURL(res1))
    // return
    let res2 = await Upload({
        file: res1,
        userId: '11111111',
    });
}
// canvas自适应
function getadapt() {
    ratio.value = window.innerWidth / 1920
}
onMounted(() => {

    getadapt()
    canvasBox.value.width = `${240 * ratio.value}`
    canvasBox.value.height = `${240 * ratio.value}`

    synthesis()

})




</script>

css

<style scoped lang="less">
.canvas {
    margin: 20px;

    .name {
        input {
            border: 1px solid black;
            border-width: 1px;
        }

        button {
            width: 100px;
            height: 60px;
            background: red;
            margin-left: 10px;
        }
    }

    /* width: 100vw;
    height: 3000px;
    background: greenyellow; */
    /* overflow: scroll; */
}

img {
    width: 240px;
    height: 240px;
    margin-left: 100px;
}

canvas {
    background: red;

}
</style>