canvas 图片base64压缩

本是古典何须时尚 2022-06-02 06:41 293阅读 0赞

作者：LoveEmperor-王子様

<!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
       <title>Title</title>
    </head>
    
    <body>
    
    <canvas id="myCanvas" >
    </canvas>
    <img id="preview" src="">
    </body>
    <script>
    
    // var c=document.getElementById("myCanvas"); // var ctx=c.getContext("2d"); // // // Create gradient // var grd=ctx.createLinearGradient(0,0,200,0); // grd.addColorStop(0,"red"); // grd.addColorStop(1,"white"); // // // Fill with gradient // ctx.fillStyle=grd; // ctx.fillRect(10,10,150,80); var c=document.getElementById("myCanvas");
    var preview = document.getElementById('preview');
          var ctx = c.getContext("2d");
          var img = new Image();
          img.src = "shareimg.jpg";
          img.onload = function () {
             var width = img.width;
             var height = img.height;
             c.width = 300;
             c.height = 100;
             alert(width + '======' + height + "=====");
             ctx.drawImage(img, 2, 2,300,100);
             var imgStr = c.toDataURL("image/jpeg",0.5);
             preview.src = imgStr;
          }
    
    </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，293人围观）

还没有评论，来说两句吧...

相关阅读

相关 Base64转图片和图片转Base64

<template> <view> <view class="imgtext"> <im

爱被打了一巴掌/ 2023年01月13日 09:37/ 0 赞/ 322 阅读

相关 img对象,file对象,base64,canvas对象相互转换以及图片压缩

[ img对象，file对象，base64，canvas对象相互转换以及图片压缩 ][img_file_base64_canvas_] </h1>

àì夳堔傛蜴生んèń/ 2022年12月08日 05:14/ 0 赞/ 172 阅读

相关图片转Base64

c\提供了一个方法可以将字节数组转化为base64的格式，图片的转化就是利用了这么一个东西。图片转base64： try

古城微笑少年丶/ 2022年08月26日 13:16/ 0 赞/ 326 阅读

相关 base64转图片图片转base64

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

本是古典何须时尚/ 2022年06月17日 05:09/ 0 赞/ 373 阅读

相关 base64生成图片——图片转换变成base64

base64生成图片——图片转换变成base64 如题。下面上货。 package com.xueyou.demo; import org

桃扇骨/ 2022年06月15日 05:22/ 0 赞/ 423 阅读

相关 canvas 图片base64压缩

作者：LoveEmperor-王子様 <!DOCTYPE html> <html lang="en"> <head> <meta cha

本是古典何须时尚/ 2022年06月02日 06:41/ 0 赞/ 294 阅读

相关 H5使用Base64和Canvas上传图片

参考： [https://blog.csdn.net/a515557595\_xzb/article/details/79098679][https_blog.c

Dear 丶/ 2022年05月18日 09:43/ 0 赞/ 245 阅读

相关图片上传前压缩，base64图片压缩

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

你的名字/ 2022年05月18日 00:58/ 0 赞/ 277 阅读

相关 base64转图片

import java.io.File; import java.io.FileOutputStream; import java.io.OutputS

╰半夏微凉°/ 2022年04月10日 04:41/ 0 赞/ 409 阅读

相关前端图片在线转换Base64 图片编码Base64

首先讲一下什么是图片Base64编码：简单来说，图片的base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。为什么要用Base64？我们

比眉伴天荒/ 2021年09月14日 03:02/ 0 赞/ 1025 阅读