当前位置：首页 > wzjs >正文

公司网站建设与设计制作营销策划书范文案例

wzjs 2025/8/8 8:36:32

公司网站建设与设计制作,营销策划书范文案例,自媒体平台注册账号教程,做家教去什么网站目录为什么会有这边文章辛酸历程，不看也罢想解决问题，看这里就够了问题已解决，后边还是废话为什么会有这边文章最近，做一个项目需要用在前端实现图片裁剪功能，毋庸置疑，cropperjs是不二选择。当在…

为什么会有这边文章

辛酸历程，不看也罢

想解决问题，看这里就够了

问题已解决，后边还是废话

为什么会有这边文章

最近，做一个项目需要用在前端实现图片裁剪功能，毋庸置疑，cropperjs是不二选择。当在项目中安装了cropperjs的时候，发现已经是2.0版本了，于是去粗略的看了一眼官方的文档（文档地址），感觉只是用到基本的裁剪功能，应该不会有什么大的变动。。。

辛酸历程，不看也罢

就在一切看似风平浪静的时候，最后在将裁剪好的图片调用toDataURL()转成base64格式的时候，问题出现了，浏览器报错“Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.”得知是因为图片跨域问题造成的，顺手就把问题抛给AI，AI也很快给出了解决方案，接下来复制-粘贴-运行，还是报错，而后又百度搜索，也没有具体的案例。。。

无奈之下，就去啃文档上，但是始终没有发现关于跨域这部分的内容。。。瞬间整个人都不好了。。。

这里省去一万字废话。。。

期间，想过放弃使用2.0，改用1.0版本，但是想了想不能做个轻易放弃的人，还是决定用2.0版本。抱着最后的希望去看了2.0的源码，结合着文档，原来2.0使用了自定义元素，在运行的项目中审查元素，看到的也都是自定义的元素，而不再是div和span了。

<!--Cropper 的默认模板：-->
<cropper-canvas background><cropper-image></cropper-image><cropper-shade hidden></cropper-shade><cropper-handle action="select" plain></cropper-handle><cropper-selection initial-coverage="0.5" movable resizable><cropper-grid role="grid" bordered covered></cropper-grid><cropper-crosshair centered></cropper-crosshair><cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)"></cropper-handle><cropper-handle action="n-resize"></cropper-handle><cropper-handle action="e-resize"></cropper-handle><cropper-handle action="s-resize"></cropper-handle><cropper-handle action="w-resize"></cropper-handle><cropper-handle action="ne-resize"></cropper-handle><cropper-handle action="nw-resize"></cropper-handle><cropper-handle action="se-resize"></cropper-handle><cropper-handle action="sw-resize"></cropper-handle></cropper-selection>
</cropper-canvas>

想解决问题，看这里就够了

总之，上边全是废话，看这里就可以解决这个问题，哈哈哈哈哈。。。

<!-- cropperImg.vue 省略了无关代码 -->
<template><!--...省略无关代码 --><img class="cropperImg" id="cropperImg" :src="state.imgUrl" /><el-button @click="getBase64">转base64</el-button>
</template><script lang="ts" setup>
import {onMounted, reactive} from "vue"
//...省略无关代码
const state = reactive({// cropper 实例cropper: undefined as any
});onMounted(() => {initCropper();
});// 初始化cropperjs实例
const initCropper = () => {nextTick(() => {state.cropper = new Cropper("#cropperImg");// 获取到上边的  cropper-image 自定义的dom元素，并设置crossorigin=“anonymous”即可// 没错！就这么简单，硬是搞了一天才解决state.cropper.getCropperImage().crossorigin = "anonymous";});
}//获取截图并转换成base64
const getBase64 = async () => {// 这里注意两点：// 1、获取的是 selection（也就是裁剪框选中的部分）的canvas画布内容，而不是 这个画布（getCropperCanvas().$toCanvas()）;// 2、2.0版本的cropperjs获取canvas内容改为了异步获取，所以这里需要用到 asnyc/awaitlet canvas = await state.cropper.getCropperSelection().$toCanvas();// 然后就可以正常将选框的部分转换成base64字符串了let base64 = canvas.toDataURL("image/jpeg");//...console.log("base64=", base64);
}
</script>