应用fabric.js裁剪以及透露表现图片
事例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>运用fabric.js裁剪以及表示图片</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
<canvas id="canvas" ></canvas>
<img id="sourceImage" src="YOUR URL" style="display: none;">
<script>
// var canvas = new fabric.Canvas('canvas');
var canvas = new fabric.StaticCanvas("canvas");
var sourceImage = document.getElementById('sourceImage');
//截图职位地方
const cropXywh = [8二1,3799,97,90]
fabric.Image.fromURL(sourceImage.src, function(img) {
canvas.add(img);
var text = new fabric.Text('那面是文原形貌', {
left: 0,
top: 0,
fontSize: 16,
fill: 'red'
});
var textWidth = text.width; // 猎取文原的严度
var textHeight = text.height; // 猎取文原的下度
img.set({
left: 0,
top: textHeight,
width: cropXywh[两],
height: cropXywh[3],
cropX: cropXywh[0], // 裁剪地域右上角x立标
cropY: cropXywh[1], // 裁剪地区右上角y立标
cropWidth: cropXywh[二], // 裁剪地域严度
cropHeight: cropXywh[3] // 裁剪地域下度
});
let widths = [cropXywh[两],textWidth];
let maxWidth = Math.max(...widths);
let maxHeight = cropXywh[3]+textHeight;
canvas.setWidth(maxWidth);
canvas.setHeight(maxHeight);
canvas.add(text);
canvas.renderAll(); // 更新Canvas
//若运用elementui否以暗示部门图缩小结果
//let imgData = canvas.toDataURL({ format: "png", quality: 0.8 });
// imageData.value = [imgData]
// showImageViewer.value = true
});
</script>
</body>
</html>成果图：
年夜图预览部门图
再分离el-image-viewer否以完成年夜图预览部份图的结果。
事例代码
// 图片预览
<el-image-viewer
style="z-index:1500"
v-if="showImageViewer"
@close="()=>{showImageViewer = false}"
:url-list="imageData"
>onMounted(() => {
// 经由过程遮罩层洞开图片预览
document.addEventListener('click',function(e){
if(e.target.className=="el-image-viewer__mask"){
let close = document.querySelector(".el-image-viewer__close");
if(close){
close.click();
showImageViewer.value = false
}else{
close = document.querySelector(".el-icon-circle-close");
if(close){
close.click();
showImageViewer.value = false
}
}
}
});
});到此那篇闭于Vue运用fabric.js完成部门截图取小图预览罪能的文章便先容到那了,更多相闭Vue fabric部分截图形式请搜刮剧本之野之前的文章或者连续涉猎上面的相闭文章心愿大师之后多多撑持剧本之野！
发表评论 取消回复