zoukankan      html  css  js  c++  java
  • js生成缩略图后上传并利用canvas重绘

    function drawCanvasImage(obj,width, callback){

    var $canvas = $('<canvas></canvas>'),
    canvas = $canvas[0],
    context = canvas.getContext('2d');

    var img = new Image();

    img.onload = function(){
    if(width){
    if(width > img.width){
    var target_w = img.width;
    var target_h = img.height;
    }else{
    var target_w = width;
    var target_h = parseInt(target_w/img.width*img.height);
    }
    }else{
    var target_w = img.width;
    var target_h = img.height;
    }
    $canvas[0].width = target_w;
    $canvas[0].height = target_h;

    context.drawImage(img,0,0,target_w,target_h);

    _canvas = canvas.toDataURL();
    /*console.log(_canvas);*/
    callback(obj,_canvas);
    }
    img.src = getFullPath(obj);

    }

    function getFullPath(obj)
    {
    if(obj)
    {
    //ie
    if (window.navigator.userAgent.indexOf("MSIE")>=1)
    {
    obj.select();
    return document.selection.createRange().text;
    }
    //firefox
    else if(window.navigator.userAgent.indexOf("Firefox")>=1 || $.browser.opera || $.browser.mozilla)
    {
    if(obj.files && window.URL.createObjectURL)
    {
    return window.URL.createObjectURL(obj.files[0]);
    }
    return obj.value;
    }else if($.browser.safari){
    if(window.webkitURL.createObjectURL && obj.files){
    return window.webkitURL.createObjectURL(obj.files[0]);
    }
    return obj.value;
    }
    return obj.value;
    }
    }

    ------------------------------------------------------------------------------------

    函数getFullPath为获取选中的图片的地址。

    _canvas获取到的是base64编码的图片编码,将其传输到后端写入文件即可。

    ------------------------------------------------------------------------------------

  • 相关阅读:
    散列算法
    【转】认证 (authentication) 和授权 (authorization) 的区别
    Filter和interceptor比较
    【转】深入理解Spring的两大特征(IOC和AOP)
    [转]web.xml中servlet ,filter ,listener ,interceptor的作用与区别
    线程同步
    Java容器
    进程间交互的几种方式
    JSP和Servlet的区别
    IPC介绍
  • 原文地址:https://www.cnblogs.com/parning/p/4683111.html
Copyright © 2011-2022 走看看