vue canvas拼接图片(纵向)

vue 图片竖向拼接组件代码

底部有demo

<template><div><div><inputtype="file"id="upFile"@change="upFile($event)"accept="image/*"multiple="multiple"style="display:none"/><label for="upFile"><span class="choosefile-btn">选择文件</span></label></div><div v-if="isPreview"><img :src="imgurl" style="width:100%" /></div></div>
</template><script>
export default {data() {return {returnData: null,imgurl: null,};},props: {isPreview: {type: Boolean,required: false,default: true,},isAutoDownload: {type: Boolean,required: false,default: false,},returnType: {type: String,required: false,default: "base64",validator: (value) => {return ["base64", "file"].indexOf(value) !== -1;},},widths: {type: [String, Number],required: false,default: 1366,},quality: {type: [String, Number],required: false,default: 0.618,},},methods: {base64ToBlob(code) {let parts = code.split(";base64,");let contentType = parts[0].split(":")[1];let raw = window.atob(parts[1]);let rawLength = raw.length;let uInt8Array = new Uint8Array(rawLength);for (let i = 0; i < rawLength; ++i) {uInt8Array[i] = raw.charCodeAt(i);}return new Blob([uInt8Array], { type: contentType });},downloadFile(fileName, content) {let aLink = document.createElement("a");let blob = this.base64ToBlob(content); // new Blob([content]);let evt = document.createEvent("HTMLEvents");evt.initEvent("click", true, true); // initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为aLink.download = fileName;aLink.href = URL.createObjectURL(blob);aLink.dispatchEvent(new MouseEvent("click", {bubbles: true,cancelable: true,view: window,})); // 兼容火狐},upFile() {if (this.returnType !== "file") {const files = Array.from(event.target.files);this.filesToInstances(files);} else {this.returnData = event.target.files;this.returnRes();}},filesToInstances(files) {const length = files.length;let instances = [];let finished = 0;files.forEach((file, index) => {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = (e) => {const image = new Image();image.src = e.target.result;image.onload = () => {// 图片实例化成功后存起来instances[index] = image;finished++;if (finished === length) {this.drawImages(instances);}};};});},drawImages(images) {const width = this.widths;const heights = images.map((item) => (width / item.width) * item.height);const canvas = document.createElement("canvas");canvas.width = width;canvas.height = heights.reduce((total, current) => total + current);const context = canvas.getContext("2d");let y = 0;images.forEach((item, index) => {const height = heights[index];context.drawImage(item, 0, y, width, height);y += height;});const base64Url = canvas.toDataURL("image/jpeg", this.quality);this.dealImages(base64Url);if (this.returnType == "base64" && this.isAutoDownload) {this.downloadFile(this.createFileName(), base64Url);}},dealImages(url) {this.imgurl = url;this.returnData = url;this.returnRes();},returnRes() {this.$emit("getRes", this.returnData);},createFileName() {return "图片拼接" + new Date().getTime();},},
};
</script><style>
.choosefile-btn {display: inline-block;padding: 10px 20px;margin-top: 40px;background: rgb(83, 170, 148);border-radius: 8px;color: #efeefe;
}
</style>

使用

<Splicing :isPreview="true" @getRes="getSpellData"/>
...
import Splicing from '@/components/Splicing.vue';
components: {Splicing},getSpellData(e){//返回的base64或者file结果console.log(e);},

react拼接图片代码:react拼接图片代码

angular拼接图片代码:angular拼接图片代码

demo地址(vue):demo

vue canvas拼接图片(纵向)相关推荐

react canvas拼接图片(纵向)
react 拼接图片代码底部有demo import React from "react"; import "./App.css";function App( ...
canvas拼接图片
参考地址 canvas拼接图片效果横向拼接纵向拼接代码 html <!DOCTYPE html> <html lang="en"> <head ...
js使用canvas拼接图片
人狠话不多,先看看图,是不是你需要的效果(文章最后有最终效果),样子有点点那个啥,将就着看一下就是了(图片来自网络): 测试代码如下 <!doctype html> <html la ...
vue动态拼接图片路径、img地址拼接问题 [模板字符串]
写vue写的不多,记录一下这个小坑知识点:es6模板字符串${} (一)需求: 使用vue根据后端传的json数组的某一字段来拼接img的src路径,动态的绑定img标签的图片,图片来源本地文件夹, ...
VUE+Canvas实现输入文字生成对应的字体图片小功能
你是不是经常浏览字体网站的时候,发现他们的"字体生成器"和预览功能很好奇,为什么输入框输入文字之后,点击预览,下面都会修改对应的字体内容,以便达到了没有安装字体也可以预览这个字体效 ...
canvas制作图片选区的效果（Vue）
大家好,我是南宫,今天来写一篇关于canvas绘制"图片选区"的博客. 最近我接到了一个新的任务,要求做一个新的弹窗,里面可以点击按钮,切换配置的能力.其中一个能力涉及到在图片上用 ...
android图片拼,Android 拼接图片
我只实现是纵向拼接,当然要实现各种各样的拼接道理都是一样的. 需要注意的是,图片路径中,最后一个字符是"#"的表示该图片需要进行顺时针90°的翻转,用于纠正手机竖着拍照时照片方向不 ...
android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
vue样式引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理: 在 Jav ...

vue canvas拼接图片(纵向)

vue 图片竖向拼接组件代码

vue canvas拼接图片(纵向)相关推荐

最新文章

热门文章