canvas 画图画图 打印机打出来 为什么会缩小

来源：蜘蛛抓取(WebSpider) 时间：2019-04-12 03:16 标签： canvas 画图

canvas 画图固定大小在对图片进行位迻、旋转、放大缩小时图片可能超出canvas 画图的边框，请问drawImage(img,x,y)的x和y坐标怎么计算谢谢！

最近在使用flashcanvas 画图来解决ie等不支持HTML5 canvas 畫图的问题我做的是个画笔工具，当用户把浏览器缩放为75%时画出的图形居然错位了，我把坐标的值*0.75传进去就ok了

以下是计算当前浏览器縮放比例的方法 



  

    经过我的测试发现如果在浏览器比例缩小的情况下，我们使用flashcanvas 画图绘图的话传递给flash内部的坐标参数(x,y)需要乘以缩放比例(r),這个时候我们发现绘制的图形是我预期想要的，当我把当前绘制的图形通过toDataUrl方法转换成图片流到后台保存后发现保存的图片比我在界面上繪制的偏移了而且偏移的像素正好是我缩放的比例，所以我尝试把该图片的比例在放大(1/r)倍这样就正常了；
  

  

    如果在浏览器比例放大（缩放比例r）的情况下，会发现flash舞台（就是我绘制图形的区域）的大小变得很小于是我就把canvas 画图的大小调整成了原来的r倍，此时便能正常画圖由于我把画布放大了，同时传递给flash内部绘制的坐标也放大了所以这时候在后台就不需要在把生成的图片进行缩小了，比例正好正常
  



                            

                                                    

                                

  

    

      

        

          这是我web网页程序效果图上图是canvas 畫图，下图是img
        

      

    

  





  

    这是因为图像的采样方式不够好造成的
  

  

    解决方案是自己写算法进行平均采样
  

  

    实现方式有两种一种是js对像素点进行手动合并采样，具体算法可以用这个：githubcom斜杠sapics斜杠scale.js
  

  

    还有一个方案使用webgl，用gpu对图片进行平均合并采样需要自己写shader，并且需要比较新的浏览器和电脑需要支持webgl，运行效率比较高
  





  

    1 转SVG 格式 这是矢量图形 放大缩小 不会失真
  

  

    2 你的画布面积太大了 你上传的图片被缩小了很多很多 所以才会这么模糊
  

  

    3 不是说H5不能做 室内平面图 CAD 才是强项
  





  

    下载百度知道APP，抢鲜体验
  

  

    使用百度知道APP立即抢鲜体验。你的手机镜头里或许有别人想知道的答案
  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 canvas 画图 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐