本地上传图片或视频获取预览图-Toy模板网

这篇具有很好参考价值的文章主要介绍了本地上传图片或视频获取预览图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

多媒体上传预览

在我们上传图片或视频需要进行预览操作，即获取该图片或视频一帧的画面作为背景显示时文章来源地址https://www.toymoban.com/news/detail-589383.html

使用el-upload时的图片预览

// el-upload 设置 :on-change 事件 值为 onChange 函数

const onChange = (file) => {
	const reader = new FileReader();
    reader.readAsDataURL(file.raw);
    reader.onload = () => {
        Promise.resolve().then(() => {
            file.url = reader.result;
            // file.url 为预览图的url地址
        });
    };
}

// 获取到预览图的地址后 需要显示在 background 中的话需要设置计算属性（vue3）
// 如果使用原生css则不需要这样写，直接用v-bind in css拼接即可，由于使用的时scss，需要使用这种写法
const bgStyle = computed(() => ({
    border: 'none',
    backgroundImage: `url(${此处为获取到的预览图地址})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center center',
}))

// 设置需要显示背景的元素 :style="bgStyle" 即可

图片预览并裁剪

// 通过input file 获取到file文件

// FileReader读取文件内容 生成base64
const reader = new FileReader();
reader.readAsDataURL(file);
reader.addEventListener('load', function () {

    // 将生成的base64给img获取图片属性
    const img = new Image();
    img.src = reader.result;
    img.addEventListener('load', function () {

        // 获取图片的宽高 
        const width = this.width;
        const height = this.height;

        // 此处由于需求原因需要裁剪，不需要可以删除 ----------------------------------------
        // 由于接口要求图片必须符合16:9 且宽能整除4  计算符合条件的矩形的高度
        let rectWidth = Math.floor(width / 4) * 4;
        let rectHeight = Math.floor(rectWidth * 9 / 16);

        if (rectHeight > height) {
            rectHeight = height; // 高度不超过矩形的高度
            rectWidth = Math.floor(rectHeight * 16 / 9);
            rectWidth = Math.floor(rectWidth / 4) * 4;
            rectHeight = Math.floor(rectWidth * 9 / 16); // 再次计算高度，确保宽高比为 16:9
        }
		// ---------------------------------------------------------------------------

        const canvas = document.createElement('canvas');
        canvas.width = rectWidth; // 替换为要截取的宽度  不需要裁剪时为 width 即可
        canvas.height = rectHeight; // 替换为要截取的高度 不需要裁剪时为 height 即可

        // 使用canvas截取符合比例的图片
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);

        // 转化为二进制文件后分别转化为 图片文件 和 图片url地址
        canvas.toBlob(function (blob) {
            const newFile = new File([blob], file.name, {type: file.type});
            const imageUrl = URL.createObjectURL(blob);
		
            // 输出图片文件和图片 URL
            // newFile为处理后的图片（裁剪后），imageUrl为预览图url路径
        });
    });
});

视频预览

// 上传文件为视频

// 通过input file 获取到file文件

const url = window.URL.createObjectURL(file);
 const video = document.createElement("video");
 video.src = url;
 // video.style.display = "none";

 /*
  * 当上传的视频较大时 video 的 loadedmetadata 事件并不能获取到视频的对应帧的画面
  * 因为此时视频还未加载完, 所以需要使用canplaythrough事件
  * 由于 video 的 canplaythrough 事件触发频率过快且一直执行
  * 设置 canGeneratePreview 当生成可用的图片后清除监听
  * 为防止图片生成错误导致事件无法停止 设置5s后自动清除监听
  */
 let canGeneratePreview = false

 setTimeout(() => {
     canGeneratePreview = true
 }, 5000)

 const canplayHandler = () => {
     if (canGeneratePreview) video.removeEventListener("canplaythrough", canplayHandler)

     const canvas = document.createElement('canvas');
     const width = video.videoWidth;
     const height = video.videoHeight;
     canvas.width = width;
     canvas.height = height;

     // 设置截取画面为第10帧
     video.currentTime = 10
     const context = canvas.getContext('2d');
     context.drawImage(video, 0, 0, canvas.width, canvas.height);

     // 生成的视频预览图截图 当截取不到画面时其base64长度约为3000左右 这里将阈值设置为20000
     const previewUrl = canvas.toDataURL('image/jpeg');
     if (previewUrl.length > 20000) canGeneratePreview = true

     // previewUrl为预览图url路径
 }

 video.addEventListener('canplaythrough', canplayHandler);