En general, al procesar la carga de la imagen, la lógica habitual es cargar la imagen de origen en el lado del servidor, y luego el lenguaje del lado del servidor realiza el funcionamiento de la escala.
Este modo generalmente puede satisfacer la mayoría de las necesidades, pero cuando la imagen que necesitamos es solo una miniatura de la imagen fuente de un tamaño específico, usar este modo será una forma de desperdiciar los recursos del servidor y el ancho de banda. Por lo tanto, consideramos generar imágenes pequeñas en el navegador y luego cargarlas.
// El siguiente es el código fuente
La copia del código es la siguiente:
function drawCanVasImage (obj, ancho, devolución de llamada) {
var $ Canvas = $ ('<Vasvas> </Canvas>'),
Canvas = $ Canvas [0],
context = Canvas.getContext ('2d');
var img = nueva imagen ();
img.onload = function () {
if (ancho) {
if (width> img.width) {
var Target_w = img.width;
var Target_h = img.Height;
}demás{
var Target_w = Width;
var Target_h = parseInt (target_w/img.width*img.height);
}
}demás{
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);*/
devolución de llamada (obj, _canvas);
}
img.src = getFullPath (obj);
}
función getFullPath (OBJ)
{
if (obj)
{
//es decir
if (window.navigator.useragent.indexof ("msie")> = 1)
{
obj.select ();
return Docum.Selection.CreaterGe (). Text;
}
// Firefox
else if (window.navigator.useragent.indexof ("firefox")> = 1 || $ .browser.opera || $ .browser.mozilla)
{
if (obj.files && window.url.createObjectUrl)
{
Ventana de retorno.url.createObjectUrl (obj.files [0]);
}
regresar obj.value;
} else if ($. browser.safari) {
if (window.webkiturl.createObjectUrl && obj.files) {
Ventana de retorno.webkiturl.createObjectUrl (obj.files [0]);
}
regresar obj.value;
}
regresar obj.value;
}
}
La función GetFullPath es obtener la dirección de la imagen seleccionada.
_Canvas obtiene la codificación de imagen codificada Base64 y simplemente transfiérala al backend para escribir al archivo.