js 图片base64

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <script>
        function init() {
            var canvas = document.createElement(‘canvas‘)
            var ctx = canvas.getContext(‘2d‘);
            var img = new Image();
            img.src = "临时图片/1.png";
            img.onload = function() {
                //原图的大小
                ctx.drawImage(img, 0, 0, 100, 100);
                console.log(canvas.toDataURL())
                document.getElementById(‘imgbase64‘).src = canvas.toDataURL();
            }
        }
    </script>
</head>

<body >
    <img id="imgbase64" src="" />
</body>

</html>

时间： 2024-12-17 10:19:22

js 图片base64的相关文章

JS 图片转Base64

JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决这个问题. 废话不多说直接上代码.不知道什么是Base64的请自行百度. 图片转Base64 示例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS

js压缩图片base64长度

1 var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); 2 (function (base64){ 3 var image = new Image(),newBase64,MAX_HEIGHT = 160; 4 image.onload = function(){ 5 var canvas = document.getElementById("myCanvas"); 6 if(image.heig

js图片转base64

/** * 将图片转换为Base64 */ function image2Base64(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height);

原生Js图片上传

上传图片通常用两种格式: base64,byte ---------------------------------------------------------------------------------------- byte上传: FileReader.readAsArrayBuffer//将file读取为ArrayBuffer base64上传 FileReader.readAsDataUrl//将file读取为Url. ------------------------------

canvas图片base64编码后，ajax提交到后台

如题,直接上JS var imgData = canvas.toDataURL("image/png"); var data = imgData.substr(22); $.post('Gen', { 'data': data, 'remark': $('remark').val() } ,function(success) { $('#img1').src('data:image/jpeg;base64,' + success); } ); 后台C# string inputStr

js图片轮播与索引变色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JS图片Switchable切换大集合

JS图片切换大集合利用周末2天把JS图片切换常见效果封装了下,比如:轮播,显示隐藏,淡入淡出等.废话不多说,直接看效果吧!JSFiddler链接如下: 想看JS轮播切换效果请点击我! 当然由于上传图片时候 png图片自动转换成jpg 所以左右按钮有透明,但是也没有关系,我们最主要的是看看效果是什么样的,至于图片大家可以替换.下面看看默认配置项吧! container '', 外层容器必填项默认为空 contentCls '.list', 内容所在的容器默认为'.l

js图片延迟加载

http://stylechen.com/imglazyload2.html [译]页面加载中的图片性能优化 2013年05月26日吴天豪性能优化原文地址:http://www.stevesouders.com/blog/2013/04/26/i/ 我的大部分性能优化工作都集中在JavaScript和CSS上,从早期的Move Scripts to the Bottom和Put Stylesheets at the Top规则.为了强调这些规则的重要性,我甚至说过,"JS和CSS是页面

js图片放大镜

JS图片放大镜效果. 应用场景:各大电商网站. (附件)  <!DOCTYPE html> <html lang="en"> <head> <me