html5 canvas上传图片后预览

最新推荐文章于 2023-04-18 23:10:41 发布

_iorilan

最新推荐文章于 2023-04-18 23:10:41 发布

阅读量1.8k

点赞数 3

分类专栏： Javascript

本文链接：https://blog.csdn.net/lan_liang/article/details/78276097

版权

Javascript 专栏收录该内容

114 篇文章 1 订阅

订阅专栏

html5 canvas上传图片后预览

1.html

<input type="file" name="image" accept="image/*" id="fileChoosed">    
<canvas id="canvasFile" style="margin-top:15px;" width="500" height="400"></canvas>

2.javascript

var photoW = 400;
        var photoH = 300;
        var photo;
        $(document).ready(function() {


		// show image preview after selection
            $("#fileChoosed").change(function picChange(evt) {
                //get files captured through input
                var fileInput = evt.target.files;
                if (fileInput.length > 0) {
                    //window url
                    var windowURL = window.URL || window.webkitURL;
                    //picture url
                    var picURL = windowURL.createObjectURL(fileInput[0]);
                    //get canvas
                    var photoCanvas = document.getElementById("canvasFile");
                    var ctx = photoCanvas.getContext("2d");


                    //create image
                    photo = new Image();


                    photo.onload = function() {
                        //draw photo into canvas when ready
                        ctx.drawImage(photo, 0, 0, photoW, photoH);
                    };


                    //load photo into canvas
                    photo.src = picURL;


                    var arr = picURL.split('/');
                    var imgUrl = arr[arr.length - 1];
                    windowURL.revokeObjectURL(imgUrl);


                }
            });
        });