Partagez un projet mobile en utilisant Canvas pour synthétiser des images d'affiche-Tutoriel H5-php.cn

Partagez un projet mobile en utilisant Canvas pour synthétiser des images d'affiche

零下一度

Libérer： 2017-06-30 15:26:43

original

6743 Les gens l'ont consulté

Récemment, j'ai réalisé un projet mobile qui utilisait Canvas pour synthétiser des images d'affiches. Comme je n'avais aucune base de toile, j'ai cherché sur Internet une démo d'un senior, mais j'ai rencontré de nombreux problèmes pendant. le processus de développement. Les problèmes rencontrés et leurs solutions sont résumés comme suit :

1.Le problème de l'adaptation des projets de toile mobile en plein écran

Description du problème : étant donné que la largeur et la hauteur du canevas ne peuvent être définies que sur des valeurs px et ne prennent pas en charge les unités rem, il est difficile d'obtenir l'effet du canevas remplissant tout l'écran lorsque le la résolution d’écran des appareils mobiles est complexe.

Solution : obtenez la valeur clientWidth de l'écran du téléphone mobile via js et attribuez-la au canevas pour obtenir l'effet d'adaptation au plein écran

var clientWidth = document.documentElement.clientWidth;
var canvasWidth = Math.floor(clientWidth);
var canvasHeight = Math.floor(clientWidth*(1334/750));
$("#main").css('width',canvasWidth+'px');
$("#main").css('height',canvasHeight+'px');

Copier après la connexion

2. Les images synthétisées par Canvas apparaissent flouesDescription du problème : Les images générées par Canvas apparaissent floues, surtout lorsqu'il y a un Code QR sur l'image Ceux qui doivent être reconnus ne peuvent pas du tout être reconnus par les utilisateurs

Solutions : 1) Vous pouvez vous référer au plug-in hidpi-canvas.js pour résoudre ce problème ;

2) Vous pouvez également modifier la largeur et la largeur dans le style du canevas. Définissez la valeur de hauteur sur la taille souhaitée, puis agrandissez les valeurs de largeur et de hauteur du canevas de x fois respectivement. dessinez des images ou du texte dans le canevas, les valeurs correspondantes doivent également être agrandies de x fois.

3. Lors de la composition d'images, les images de certains modèles sont désordonnées

Description du problème : certains téléphones Android sont exportation du canevas Lors de l'utilisation d'images base64, seule la moitié de l'image avec l'effet souhaité peut être affichée. L'analyse préliminaire indique qu'il s'agit d'un bug causé par le rapport de pixels de l'appareil.

Solution : obtenez le rapport de pixels de l'appareil et déterminez le modèle. Ici, j'ai uniquement déterminé s'il s'agit d'un iPhone ou d'un Android. Il n'y a pas encore de problème lors de la composition de l'image, restaurez les valeurs de largeur et de hauteur. à leurs dimensions d'origine.

//hidpi-canvas将canvas的width和height属性放大pr倍
if (navigator.userAgent.match(/iphone/i)) {
    canvas.width = width ;//恢复为原先的大小
    canvas.height = height ;
}else{
    canvas.width = width / pr;//恢复为原先的大小
    canvas.height = height / pr;
}

Copier après la connexion

4. Il y a un problème de rotation lors du téléchargement de photos sur iPhone

Description du problème : Au cours du test, il a été constaté que les photos téléchargées par l'iPhone étaient pivotées, mais ce problème ne s'est pas produit lors du téléchargement de photos enregistrées depuis Internet et Android était normal.

Solution : Ce problème peut être résolu à l'aide du plug-in exif.js. Ce plug-in obtiendra l'angle et d'autres informations lors de la prise de la photo, principalement l'attribut Orientation, afin d'effectuer les opérations correspondantes. ;

var file = $(this)[0].files[0];
EXIF.getData(file, function() {  
    EXIF.getAllTags(this);     
    Orientation = EXIF.getTag(this, 'Orientation');  
});

Copier après la connexion

Description du problème : lorsqu'il y a des images demandées depuis plusieurs domaines dans le canevas, l'exportation des images base64 échoue. L'analyse préliminaire doit être provoquée par le mécanisme de sécurité du canevas lui-même.

Solution : ce bug doit être résolu par la coopération front-end et back-end. Tout d'abord, définissez l'image sur le back-end pour autoriser le cross-domain, puis définissez Img.crossOrigin = "Anonyme. " ; sur le front-end.

var pageqrcodeimg = qrcodecanvas.toDataURL('image/jpg');
var qrcodeImg = new Image();
qrcodeImg.crossOrigin = "Anonymous"; 
qrcodeImg.src = pageqrcodeimg;
qrcodeImg.onload=function(){
        //绘制图片
}

Copier après la connexion

6. Un écran blanc apparaîtra lorsque vous dessinez des images sur toile

Description du problème : Un écran blanc apparaît parfois lors du dessin d'images sur toile. L'analyse préliminaire est que l'opération de dessin est effectuée avant la lecture de l'image.

Solution : ajoutez la fonction onload à img, puis effectuez l'opération de dessin une fois l'image lue.

qrcodeImg.onload=function(){
        //绘制图片
}

Copier après la connexion

7. Un appui long sur l'image pendant la navigation sur WeChat ne peut pas être enregistré

Description du problème : les images générées via Canvas ne peuvent pas être enregistrées ou le code QR peut être reconnu lorsqu'on appuie longuement sur le navigateur WeChat. Cela se produit dans certaines images sur Android, mais l'analyse préliminaire est que la qualité de l'image est normale. trop haut.

Solution : compresser la qualité de l'image lors de l'exportation d'images base64.

var mycanvas = document.getElementById("main");
var image = mycanvas.toDataURL("image/jpeg",0.7);

Copier après la connexion

Post-scriptum : Ce sont essentiellement les problèmes rencontrés jusqu'à présent. Si des problèmes surviennent à l'avenir, nous continuerons à mettre à jour.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!