zoukankan      html  css  js  c++  java
  • html5 canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>canvas</title>
        <script type="text/javascript" src="../js/jQuery.js"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                outline: none;
                border: none;
            }
            #canvas{
                margin: auto auto;
                width: 7rem;
                margin: .25rem 0 0 1.5rem;
                border: 1px solid black;
            }
        </style>
    </head>
    <body> 
        <canvas id="canvas" width="1000" height="600"></canvas>
        <img id="img" src="" />
    </body>
    </html>
    <script type="text/javascript">
        /**
         * rem 布局初始化
         */
        $('html').css('font-size', $(window).width()/10);
        /**
         * 获取 canvas 画布
         * 获取 canvas 绘图上下文环境
         */
        var canvas = $('#canvas')[0];
        var cxt = canvas.getContext('2d');
        
        /**
         * 图片处理函数 drawImage, 图片转化为 base64 格式 toDataURL
         * drawImage(图形对象, sx, sy, sw, sh, dx, dy, dw, dh)
         * s: 原图形
         * d: 新图形
         * x: 图形的起点横坐标
         * y: 图形的起点纵坐标
         * w: 图形的宽度
         * h: 图形的高度
         * toDataURL("图片格式, 默认为 image/png")
         */
        var img = new Image();
        img.src = "../img/background_2.jpg";
        img.onload = function(){
            cxt.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
            var src = canvas.toDataURL("image/jpeg");
            $('#img').attr('src', src);
        }    
    </script>
  • 相关阅读:
    Python 写Windows Service服务程序
    关于Python 获取windows信息收集
    Pyqt 获取windows系统中已安装软件列表
    Python 打开目录与指定文件
    【转载】Pyqt 编写的俄罗斯方块
    Python win32api提取exe图标icon
    Pyqt QListWidget之缩略图列表
    Pyqt 时时CPU使用情况
    Python 的三目运算
    Chrome Crx 插件下载
  • 原文地址:https://www.cnblogs.com/lovling/p/6660250.html
Copyright © 2011-2022 走看看