图像左侧的空白区域

Question

当我使用html2canvas的默认设置时，空白区域清晰可见，并且还将图像推向左侧。

以下是代码：

JS：

$(document).ready(function() {
    var name = $('#name').val();
    var base_color = '524726';

    $('#geopattern').geopattern(name, { baseColor: '#' + base_color }).text(get_initials(name));

    // ...

    $('body').on('click', '#save', function() {
        html2canvas(document.querySelector("#geopattern")).then(function(canvas) {
            $('#hidden-data').val(canvas.toDataURL("image/jpeg"));
            document.getElementById("form").submit();
        });
    });
});

PHP：

<?php
$hidden_data = $_POST['hidden-data'];
$hidden_name = $_POST['hidden-name'];
$data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $hidden_data));
file_put_contents('images/avatars/'.$hidden_name.'.jpg', $data);
echo '<img src="images/avatars/'.$hidden_name.'.jpg">';
?>

CSS：

#geopattern {
    align-items: center;
    display: flex;
    color: #eaeaea;
    cursor: default;
    height: 512px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 20em;
    font-weight: 700;
    justify-content: center;
    width: auto;

    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

这是错误还是我做错了？我有最新版本。

Answer 1

感谢您分享代码。最后它有助于找到错误。

由于package com.example.rajen.railwaycrackk; import android.content.BroadcastReceiver; import android.content.Context; import android.content.Intent; import android.content.SharedPreferences; import android.os.Bundle; import android.preference.PreferenceManager; import android.support.v4.content.LocalBroadcastManager; import android.telephony.SmsManager; import android.telephony.SmsMessage; import android.util.Log; import android.widget.Toast; import com.google.android.gms.maps.CameraUpdateFactory; import com.google.android.gms.maps.GoogleMap; import com.google.android.gms.maps.model.LatLng; import com.google.android.gms.maps.model.MarkerOptions; /** * Created by rajen on 29-01-2018. */ public class SmsReceiver extends BroadcastReceiver { // Get the object of SmsManager final SmsManager sms = SmsManager.getDefault(); public static final String ADD_MARKER = "some.unique.string.ADD_MARKER"; private GoogleMap mMap; public SmsReceiver (GoogleMap mMap) { this.mMap = mMap; } public void onReceive(Context context, Intent intent) { // Retrieves a map of extended data from the intent. final Bundle bundle = intent.getExtras(); if (intent.getAction().compareTo(ADD_MARKER) == 0) { double lat = intent.getDoubleExtra("lat", 0); double lng = intent.getDoubleExtra("lng", 0); } // do something with map using lat/lng try { if (bundle != null) { final Object[] pdusObj = (Object[]) bundle.get("pdus"); for (int i = 0; i < pdusObj.length; i++) { SmsMessage currentMessage = SmsMessage.createFromPdu((byte[]) pdusObj[i]); String phoneNumber = currentMessage.getDisplayOriginatingAddress(); String senderNum = phoneNumber; String message = currentMessage.getDisplayMessageBody(); Log.i("SmsReceiver", "senderNum: " + senderNum + "; message: " + message); // Show Alert int duration = Toast.LENGTH_LONG; Toast toast = Toast.makeText(context, "senderNum: " + senderNum + ", message: " + message, duration); toast.show(); // LatLng position = new LatLng(20.5937, 78.9629); // MapsActivity.plotOnMap(position); } // end for loop } // bundle is null Intent broadcastIntent = new Intent(); // get 'lat' and 'lng' from message broadcastIntent.setAction(SmsReceiver.ADD_MARKER); broadcastIntent.addCategory(Intent.CATEGORY_DEFAULT); broadcastIntent.putExtra("lat", 10); broadcastIntent.putExtra("lng", 10); LocalBroadcastManager.getInstance(context.getApplicationContext()).sendBroadcast(broadcastIntent); } catch (Exception e) { Log.e("SmsReceiver", "Exception smsReceiver" + e); } } } 上设置了margin: 50px auto;，会出现白色差距。

见this fiddle。如果取消注释相应的行，则错误将显示在结果图像中。

希望它有所帮助。