Charger une Image à partir d'un chemin local et le dessiner sur la toile

Je veux dessiner une image sur la toile où la source de l'image sera de définir dynamiquement par l'utilisateur.Je suis d'erreur suivant lors de la tentative de définir la src de l'image:

Pas autorisés à charger des ressources locales: file:///D:/My%20Picsb.jpg'

Est-il possible de charger des fichiers à partir de lecteurs locaux pour les dessiner sur une toile?

var img = new Image();
img.onload = function () {  
    context.drawImage(img, 20, 20, 50, 50);
};

img.src = "D:\My Pics\tb.jpg";

OriginalL'auteur dexter007 | 2014-02-09

  1. 14

    Ce que vous voulez de ne pas travailler pour des raisons de sécurité. Ce que vous pourrait faire, cependant, est l'ajout d'un fichier de champ de saisie et télécharger à la toile, comme ceci:

    HTML

    <input type="file" id="file_input">

    JS

    $("#file_input").change(function(e){


    var URL = window.webkitURL || window.URL;
    var url = URL.createObjectURL(e.target.files[0]);
    var img = new Image();
    img.src = url;


    img.onload = function() {

            img_width = img.width;
            img_height = img.height;

            context.drawImage(img, 0, 0, img_width, img_height);

    }


});

    J'ai eu le même problème que vous il n'ya pas longtemps, et que ce code a fait le travail quand il s'agit de chargement des images locales sur une toile. Je voudrais cependant vous conseillons également de finalement redimensionner l'image, de sorte qu'il s'inscrit dans la toile. J'ai utilisé le code suivant (remplacer 460 avec la taille de votre toile).

    var new_x = 0;
var new_y = 0;

if (img_width > img_height) {
    new_x = 460;
    new_y = (460*img_height)/img_width;
} 

else if (img_height > img_width) {
    new_x = (460*img_width)/img_height;
    new_y = 460;
}

else {
    new_x = 460;
    new_y = 460;
}

context.drawImage(img, 0, 0, new_x, new_y);
    Merci beaucoup
    pas de probs, l'homme 🙂
    Est-il une source écrit en caractères d'imprimerie svp?

    OriginalL'auteur Daniel Lisik

  2. 0

    J'ai eu le besoin pour des fonctionnalités similaires et résolu à l'aide d'ajax par téléchargement de l'image, de manière temporaire sur le serveur et la définition de l'attribut src de la cible img pour que le nom de fichier temporaire. Vous pouvez compléter la tâche en créant une tâche cron qui supprime ceux temporaire d'images à partir de votre serveur de répertoire.

    OriginalL'auteur jjyepez

  3. -3

    Pas. JavaScript a blocage de sécurité de l'accès à des fichiers locaux, que ce soit en lecture ou en écriture. Mettre le fichier sur un serveur web ( le meilleur sur le même domaine, à cause de la croix de domaine ).

    Parce que l'utilisateur doit fournir pour le fichier que vous avez le code du chargement d'un fichier de solution. Référence de l'internet sur la façon de le faire.

    Juste pour dire...Vous faites référence à la Croix-Origine de sécurité (SCRO), mais de la SCRO ne pas restreindre le chargement d'une image locale si l'utilisateur procède à l'extraction. L'utilisateur peut lancer l'extraction par (1) l'activation d'une entrée html de type de fichier de l'élément ou (2) en faisant glisser une image dans un dropzone div qui utilise FileReader pour obtenir l'image du dataURL. BTW, je n'ai pas ding-vous avec le downvote. Cheers!

    OriginalL'auteur yunzen