Avantage: J'ai récemment fait un élément mobile avec des images d'affiches synthétiques en toile. .
1. Problème plein écran d'adaptation du projet de canevas mobileDescription du problème: Étant donné que la largeur et la hauteur de Canvas ne peuvent définir que les valeurs PX et ne prennent pas en charge les unités REM, il est difficile d'atteindre l'effet de la toile recouverte d'écrans complets lorsque la résolution d'écran de l'appareil mobile est compliquée. Solution: Obtenez la valeur de la largeur client de l'écran du téléphone mobile via JS et donnez-le à Canvas pour obtenir l'effet de l'adaptation de l'écran;
Var clientwidth = document.DocumentElement.ClientWidth; px '); $ (#main) .css («hauteur», canvasheight + «px»);2. L'image de la synthèse de toile apparaît un phénomène flou
Description du problème: Il y a un vague problème avec les images générées par Canvas, surtout s'il y a des codes QR sur l'image, qui doivent être reconnus, les utilisateurs ne peuvent pas le reconnaître;
Solution: 1) Vous pouvez citer le plug-in Hidpi-Canvas.js pour résoudre ce problème;
2) Vous pouvez également définir les valeurs de largeur et de hauteur dans le style de canevas pour définir la taille que vous souhaitez, puis magnifier la valeur de la largeur et de la hauteur de la toile respectivement.
3. Lorsque les images synthétiques sont synthétiques, certaines images de modèles sont chaotiquesDescription du problème: Lorsque certains téléphones Android exportent l'image de base64 de la toile, ils ne peuvent afficher la moitié de l'image de l'effet de l'effet.
Solution: Obtenez le ratio de pixels de l'équipement, jugez le modèle. Taille d'origine.
// Hidpi-canvas agrandir les attributs de largeur et de hauteur de la toile.4. Le problème de la rotation de l'image de téléchargement du téléphone portable iPhone
Description du problème: Pendant le test, il a été constaté que les photos téléchargées par téléphone portable iPhone de la rotation, et l'image téléchargée depuis Internet ne se produira pas, et Android est normal.
Solution: Ce problème peut être résolu à l'aide de la fiche exif.js.
var file = $ (this) [0] .Files [0]; ) ;;5. Canvas dessine des images croisées et ne peut pas exporter des images de base64
Description du problème: Lorsqu'il y a des images de demandes croisées dans la toile, l'image de la base64 échoue.
Solution: Ce bug doit être résolu avec le dos et le dos.
Var PageQrCodeImg = qrcodecanvas.todaurl ('image / jpg'); 6. L'écran blanc apparaîtra lors du dessin de photos de toileDescription du problème: La situation de l'écran blanc apparaît occasionnellement lorsque la toile dessine une image.
Solution: ajoutez la fonction onload à IMG, puis effectuez l'opération de dessin après avoir lu l'image.
qrcodeImg.onload = function () {// dessiner une image} 7, navigateur WeChat, appuyez sur de longues sous l'image, ne peut pas être enregistréDescription du problème: L'image générée par la toile ne peut pas être enregistrée ou reconnue le code QR dans le navigateur WeChat.
Solution: Compressez la qualité de l'image lors de l'exportation de l'image Base64.
var myCanvas = document.getElementyId (main); var image = myCanvas.todataurl (image / jpeg, 0,7);
Postcript: Les problèmes actuels rencontrés sont essentiellement ceux-ci.
Ce qui précède est tout le contenu de cet article.